chore: add vxe-table toolbar example (#4765)

packages/effects/plugins/src/vxe-table/init.ts

@@ -7,13 +7,15 @@ import { useVbenForm } from '@vben-core/form-ui';
 
 import {
   VxeButton,
-  VxeButtonGroup,
+  VxeCheckbox,
+
   // VxeFormGather,
   // VxeForm,
   // VxeFormItem,
   VxeIcon,
   VxeInput,
   VxeLoading,
+  VxeModal,
   VxePager,
   // VxeList,
   // VxeModal,
@@ -22,7 +24,7 @@ import {
   // VxePulldown,
   // VxeRadio,
   // VxeRadioButton,
-  // VxeRadioGroup,
+  VxeRadioGroup,
   VxeSelect,
   VxeTooltip,
   VxeUI,
@@ -64,13 +66,12 @@ export function initVxeTable() {
   VxeUI.component(VxeTable);
   VxeUI.component(VxeColumn);
   VxeUI.component(VxeColgroup);
-  VxeUI.component(VxeLoading);
   VxeUI.component(VxeGrid);
   VxeUI.component(VxeToolbar);
 
   VxeUI.component(VxeButton);
-  VxeUI.component(VxeButtonGroup);
-  // VxeUI.component(VxeCheckbox);
+  // VxeUI.component(VxeButtonGroup);
+  VxeUI.component(VxeCheckbox);
   // VxeUI.component(VxeCheckboxGroup);
   VxeUI.component(createVirtualComponent('VxeForm'));
   // VxeUI.component(VxeFormGather);
@@ -79,14 +80,14 @@ export function initVxeTable() {
   VxeUI.component(VxeInput);
   // VxeUI.component(VxeList);
   VxeUI.component(VxeLoading);
-  // VxeUI.component(VxeModal);
+  VxeUI.component(VxeModal);
   // VxeUI.component(VxeOptgroup);
   // VxeUI.component(VxeOption);
   VxeUI.component(VxePager);
   // VxeUI.component(VxePulldown);
   // VxeUI.component(VxeRadio);
   // VxeUI.component(VxeRadioButton);
-  // VxeUI.component(VxeRadioGroup);
+  VxeUI.component(VxeRadioGroup);
   VxeUI.component(VxeSelect);
   // VxeUI.component(VxeSwitch);
   // VxeUI.component(VxeTextarea);

packages/effects/plugins/src/vxe-table/theme.css

@@ -81,3 +81,11 @@
 .vxe-pager--wrapper {
   @apply justify-center md:justify-end;
 }
+
+.vxe-tools--operate {
+  @apply ml-3;
+}
+
+.vxe-table-custom--checkbox-option:hover {
+  background: none !important;
+}

packages/effects/plugins/src/vxe-table/use-vxe-grid.vue

@@ -122,6 +122,11 @@ const options = computed(() => {
       toolbarOptions.value,
       toRaw(gridOptions.value),
       globalGridConfig,
+      {
+        // toolbarConfig: {
+        //   tools: [],
+        // },
+      } as VxeTableGridProps,
     ),
   );