refactor: 判断vxe-table的复选框是否选中

CHANGELOG.md

@@ -1,5 +1,9 @@
 # 1.1.3
 
+**REFACTOR**
+
+- 重构: 判断vxe-table的复选框是否选中
+
 **Bug Fixes**
 
 - 节点树在编辑 & 空数组(不勾选)情况 勾选节点会造成watch延迟触发 导致会带上父节点id造成id重复

apps/web-antd/src/adapter/vxe-table.ts

@@ -107,6 +107,7 @@ export type * from '@vben/plugins/vxe-table';
 
 /**
  * 通用的表格复选框是否选中事件
+ * @deprecated 使用vxeCheckboxChecked代替
  * @param checked 是否选中
  * @returns function
  */
@@ -118,3 +119,14 @@ export function tableCheckboxEvent(checked: Ref<boolean>) {
   };
   return event;
 }
+
+/**
+ * 判断vxe-table的复选框是否选中
+ * @param tableApi api
+ * @returns boolean
+ */
+export function vxeCheckboxChecked(
+  tableApi: ReturnType<typeof useVbenVxeGrid>[1],
+) {
+  return tableApi?.grid?.getCheckboxRecords?.()?.length > 0;
+}

apps/web-antd/src/views/monitor/logininfor/index.vue

@@ -9,8 +9,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 
 import {
-  tableCheckboxEvent,
   useVbenVxeGrid,
+  vxeCheckboxChecked,
   type VxeGridDefines,
   type VxeGridProps,
 } from '#/adapter/vxe-table';
@@ -77,18 +77,15 @@ const gridOptions: VxeGridProps = {
   id: 'monitor-logininfo-index',
 };
 
-const checked = ref(false);
 const canUnlock = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
   gridEvents: {
     checkboxChange: (e: VxeGridDefines.CheckboxChangeEventParams) => {
-      const records = e.$table.getCheckboxRecords();
+      const records = e.$grid.getCheckboxRecords();
-      checked.value = records.length > 0;
       canUnlock.value = records.length === 1 && records[0]?.status === '1';
     },
-    checkboxAll: tableCheckboxEvent(checked),
   },
 });
 
@@ -125,7 +122,6 @@ function handleMultiDelete() {
     onOk: async () => {
       await loginInfoRemove(ids);
       await tableApi.query();
-      checked.value = false;
     },
   });
 }
@@ -138,7 +134,6 @@ async function handleUnlock() {
   const { userName } = records[0];
   await userUnlock(userName);
   await tableApi.query();
-  checked.value = false;
   canUnlock.value = false;
   tableApi.grid.clearCheckboxRow();
 }
@@ -173,7 +168,7 @@ function handleDownloadExcel() {
             {{ $t('pages.common.export') }}
           </a-button>
           <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
             danger
             type="primary"
             v-access:code="['monitor:logininfor:remove']"

apps/web-antd/src/views/monitor/operlog/index.vue

@@ -3,19 +3,13 @@ import type { Recordable } from '@vben/types';
 
 import type { OperationLog } from '#/api/monitor/operlog/model';
 
-import { ref } from 'vue';
-
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import { Modal, Space } from 'ant-design-vue';
 import { isEmpty } from 'lodash-es';
 
-import {
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
-  tableCheckboxEvent,
-  useVbenVxeGrid,
-  type VxeGridProps,
-} from '#/adapter/vxe-table';
 import {
   operLogClean,
   operLogDelete,
@@ -88,7 +82,6 @@ const gridOptions: VxeGridProps<OperationLog> = {
   id: 'monitor-operlog-index',
 };
 
-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
@@ -96,8 +89,6 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
     sortChange: () => {
       tableApi.query();
     },
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
   },
 });
 
@@ -138,7 +129,6 @@ async function handleDelete() {
     onOk: async () => {
       await operLogDelete(ids);
       await tableApi.query();
-      checked.value = false;
     },
   });
 }
@@ -148,6 +138,11 @@ function handleDownloadExcel() {
     fieldMappingTime: formOptions.fieldMappingTime,
   });
 }
+
+function isChecked() {
+  console.log('触发');
+  return tableApi?.grid?.getCheckboxRecords?.()?.length > 0;
+}
 </script>
 
 <template>
@@ -168,7 +163,7 @@ function handleDownloadExcel() {
             {{ $t('pages.common.export') }}
           </a-button>
           <a-button
-            :disabled="!checked"
+            :disabled="!isChecked()"
             danger
             type="primary"
             v-access:code="['monitor:operlog:remove']"

apps/web-antd/src/views/system/client/index.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { ref } from 'vue';
-
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
@@ -10,8 +8,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 
 import {
-  tableCheckboxEvent,
   useVbenVxeGrid,
+  vxeCheckboxChecked,
   type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@@ -70,14 +68,9 @@ const gridOptions: VxeGridProps = {
   id: 'system-client-index',
 };
 
-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });
 
 const [ClientDrawer, drawerApi] = useVbenDrawer({
@@ -109,7 +102,6 @@ function handleMultiDelete() {
     onOk: async () => {
       await clientRemove(ids);
       await tableApi.query();
-      checked.value = false;
     },
   });
 }
@@ -133,7 +125,7 @@ const { hasAccessByCodes } = useAccess();
             {{ $t('pages.common.export') }}
           </a-button>
           <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
             danger
             type="primary"
             v-access:code="['system:client:remove']"

apps/web-antd/src/views/system/config/index.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { ref } from 'vue';
-
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 
 import {
-  tableCheckboxEvent,
   useVbenVxeGrid,
+  vxeCheckboxChecked,
   type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@@ -72,14 +70,9 @@ const gridOptions: VxeGridProps = {
   id: 'system-config-index',
 };
 
-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });
 const [ConfigModal, modalApi] = useVbenModal({
   connectedComponent: configModal,
@@ -110,7 +103,6 @@ function handleMultiDelete() {
     onOk: async () => {
       await configRemove(ids);
       await tableApi.query();
-      checked.value = false;
     },
   });
 }
@@ -140,7 +132,7 @@ async function handleRefreshCache() {
             {{ $t('pages.common.export') }}
           </a-button>
           <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
             danger
             type="primary"
             v-access:code="['system:config:remove']"

apps/web-antd/src/views/system/dict/data/index.vue

@@ -9,8 +9,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 
 import {
-  tableCheckboxEvent,
   useVbenVxeGrid,
+  vxeCheckboxChecked,
   type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@@ -73,14 +73,9 @@ const gridOptions: VxeGridProps = {
   id: 'system-dict-data-index',
 };
 
-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });
 
 const [DictDataDrawer, drawerApi] = useVbenDrawer({
@@ -115,7 +110,6 @@ function handleMultiDelete() {
     onOk: async () => {
       await dictDataRemove(ids);
       await tableApi.query();
-      checked.value = false;
     },
   });
 }
@@ -142,7 +136,7 @@ emitter.on('rowClick', async (value) => {
             {{ $t('pages.common.export') }}
           </a-button>
           <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
             danger
             type="primary"
             v-access:code="['system:dict:remove']"

apps/web-antd/src/views/system/dict/type/index.vue

@@ -9,8 +9,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 
 import {
-  tableCheckboxEvent,
   useVbenVxeGrid,
+  vxeCheckboxChecked,
   type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@@ -67,7 +67,6 @@ const gridOptions: VxeGridProps = {
   id: 'system-dict-type-index',
 };
 
-const checked = ref(false);
 const lastDictType = ref('');
 
 const [BasicTable, tableApi] = useVbenVxeGrid({
@@ -82,8 +81,6 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
       emitter.emit('rowClick', row.dictType);
       lastDictType.value = row.dictType;
     },
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
   },
 });
 const [DictTypeModal, modalApi] = useVbenModal({
@@ -115,7 +112,6 @@ function handleMultiDelete() {
     onOk: async () => {
       await dictTypeRemove(ids);
       await tableApi.query();
-      checked.value = false;
     },
   });
 }
@@ -152,7 +148,7 @@ function handleDownloadExcel() {
             {{ $t('pages.common.export') }}
           </a-button>
           <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
             danger
             type="primary"
             v-access:code="['system:dict:remove']"

apps/web-antd/src/views/system/notice/index.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { ref } from 'vue';
-
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 
 import {
-  tableCheckboxEvent,
   useVbenVxeGrid,
+  vxeCheckboxChecked,
   type VxeGridProps,
 } from '#/adapter/vxe-table';
 import { noticeList, noticeRemove } from '#/api/system/notice';
@@ -60,14 +58,9 @@ const gridOptions: VxeGridProps = {
   id: 'system-notice-index',
 };
 
-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });
 
 const [NoticeModal, modalApi] = useVbenModal({
@@ -99,7 +92,6 @@ function handleMultiDelete() {
     onOk: async () => {
       await noticeRemove(ids);
       await tableApi.query();
-      checked.value = false;
     },
   });
 }
@@ -111,7 +103,7 @@ function handleMultiDelete() {
       <template #toolbar-tools>
         <Space>
           <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
             danger
             type="primary"
             v-access:code="['system:notice:remove']"

apps/web-antd/src/views/system/oss-config/index.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { ref } from 'vue';
-
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
@@ -10,8 +8,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 
 import {
-  tableCheckboxEvent,
   useVbenVxeGrid,
+  vxeCheckboxChecked,
   type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@@ -66,14 +64,9 @@ const gridOptions: VxeGridProps = {
   id: 'system-oss-config-index',
 };
 
-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });
 
 const [OssConfigDrawer, drawerApi] = useVbenDrawer({
@@ -105,7 +98,6 @@ function handleMultiDelete() {
     onOk: async () => {
       await ossConfigRemove(ids);
       await tableApi.query();
-      checked.value = false;
     },
   });
 }
@@ -119,7 +111,7 @@ const { hasAccessByCodes } = useAccess();
       <template #toolbar-tools>
         <Space>
           <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
             danger
             type="primary"
             v-access:code="['system:ossConfig:remove']"

apps/web-antd/src/views/system/oss/index.vue

@@ -20,8 +20,8 @@ import {
 import { isEmpty } from 'lodash-es';
 
 import {
-  tableCheckboxEvent,
   useVbenVxeGrid,
+  vxeCheckboxChecked,
   type VxeGridProps,
 } from '#/adapter/vxe-table';
 import { configInfoByKey } from '#/api/system/config';
@@ -91,7 +91,6 @@ const gridOptions: VxeGridProps = {
   id: 'system-oss-index',
 };
 
-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
@@ -99,8 +98,6 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
     sortChange: () => {
       tableApi.query();
     },
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
   },
 });
 
@@ -172,7 +169,7 @@ const [FileUploadModal, fileUploadApi] = useVbenModal({
             配置管理
           </a-button>
           <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
             danger
             type="primary"
             v-access:code="['system:oss:remove']"

apps/web-antd/src/views/system/post/index.vue

@@ -9,8 +9,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 
 import {
-  tableCheckboxEvent,
   useVbenVxeGrid,
+  vxeCheckboxChecked,
   type VxeGridProps,
 } from '#/adapter/vxe-table';
 import { postExport, postList, postRemove } from '#/api/system/post';
@@ -79,14 +79,9 @@ const gridOptions: VxeGridProps = {
   id: 'system-post-index',
 };
 
-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });
 
 const [PostDrawer, drawerApi] = useVbenDrawer({
@@ -118,7 +113,6 @@ function handleMultiDelete() {
     onOk: async () => {
       await postRemove(ids);
       await tableApi.query();
-      checked.value = false;
     },
   });
 }
@@ -146,7 +140,7 @@ function handleDownloadExcel() {
             {{ $t('pages.common.export') }}
           </a-button>
           <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
             danger
             type="primary"
             v-access:code="['system:post:remove']"

apps/web-antd/src/views/system/role-assign/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
@@ -10,8 +9,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 
 import {
-  tableCheckboxEvent,
   useVbenVxeGrid,
+  vxeCheckboxChecked,
   type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@@ -69,14 +68,9 @@ const gridOptions: VxeGridProps = {
   id: 'system-role-assign-index',
 };
 
-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });
 
 const [RoleAssignDrawer, drawerApi] = useVbenDrawer({
@@ -109,7 +103,6 @@ function handleMultipleAuthCancel() {
     onOk: async () => {
       await roleAuthCancelAll(roleId, ids);
       await tableApi.query();
-      checked.value = false;
       tableApi.grid.clearCheckboxRow();
     },
   });
@@ -122,7 +115,7 @@ function handleMultipleAuthCancel() {
       <template #toolbar-tools>
         <Space>
           <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
             danger
             type="primary"
             v-access:code="['system:role:remove']"

apps/web-antd/src/views/system/role-assign/role-assign-drawer.vue

@@ -1,14 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 
-import {
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
-  tableCheckboxEvent,
-  useVbenVxeGrid,
-  type VxeGridProps,
-} from '#/adapter/vxe-table';
 import { roleSelectAll, roleUnallocatedList } from '#/api/system/role';
 
 import { columns, querySchema } from './data';
@@ -62,14 +57,9 @@ const gridOptions: VxeGridProps = {
   },
 };
 
-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });
 
 async function handleSubmit() {

apps/web-antd/src/views/system/role/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { useAccess } from '@vben/access';
@@ -23,8 +23,8 @@ import {
 } from 'ant-design-vue';
 
 import {
-  tableCheckboxEvent,
   useVbenVxeGrid,
+  vxeCheckboxChecked,
   type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@@ -91,14 +91,9 @@ const gridOptions: VxeGridProps = {
   id: 'system-role-index',
 };
 
-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });
 const [RoleDrawer, drawerApi] = useVbenDrawer({
   connectedComponent: roleDrawer,
@@ -129,7 +124,6 @@ function handleMultiDelete() {
     onOk: async () => {
       await roleRemove(ids);
       await tableApi.query();
-      checked.value = false;
     },
   });
 }
@@ -171,7 +165,7 @@ function handleAssignRole(record: Recordable<any>) {
             {{ $t('pages.common.export') }}
           </a-button>
           <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
             danger
             type="primary"
             v-access:code="['system:role:remove']"

apps/web-antd/src/views/system/tenant/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
@@ -11,8 +11,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 
 import {
-  tableCheckboxEvent,
   useVbenVxeGrid,
+  vxeCheckboxChecked,
   type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@@ -73,14 +73,9 @@ const gridOptions: VxeGridProps = {
   id: 'system-tenant-index',
 };
 
-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });
 
 const [TenantDrawer, drawerApi] = useVbenDrawer({
@@ -121,7 +116,6 @@ function handleMultiDelete() {
     onOk: async () => {
       await tenantRemove(ids);
       await tableApi.query();
-      checked.value = false;
       // 重新加载租户信息
       tenantStore.initTenant();
     },
@@ -173,7 +167,7 @@ function handleSyncTenantDict() {
             {{ $t('pages.common.export') }}
           </a-button>
           <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
             danger
             type="primary"
             v-access:code="['system:tenant:remove']"

apps/web-antd/src/views/system/tenantPackage/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
@@ -11,8 +11,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 
 import {
-  tableCheckboxEvent,
   useVbenVxeGrid,
+  vxeCheckboxChecked,
   type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@@ -69,14 +69,9 @@ const gridOptions: VxeGridProps = {
   id: 'system-tenant-package-index',
 };
 
-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });
 
 const [TenantPackageDrawer, drawerApi] = useVbenDrawer({
@@ -108,7 +103,6 @@ function handleMultiDelete() {
     onOk: async () => {
       await packageRemove(ids);
       await tableApi.query();
-      checked.value = false;
     },
   });
 }
@@ -144,7 +138,7 @@ const isSuperAdmin = computed(() => {
             {{ $t('pages.common.export') }}
           </a-button>
           <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
             danger
             type="primary"
             v-access:code="['system:tenantPackage:remove']"

apps/web-antd/src/views/system/user/index.vue

@@ -24,11 +24,8 @@ import {
   Space,
 } from 'ant-design-vue';
 
-import {
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
-  tableCheckboxEvent,
+import { vxeCheckboxChecked } from '#/adapter/vxe-table';
-  useVbenVxeGrid,
-  type VxeGridProps,
-} from '#/adapter/vxe-table';
 import {
   userExport,
   userList,
@@ -126,14 +123,9 @@ const gridOptions: VxeGridProps = {
   },
   id: 'system-user-index',
 };
-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });
 
 const [UserDrawer, userDrawerApi] = useVbenDrawer({
@@ -165,7 +157,6 @@ function handleMultiDelete() {
     onOk: async () => {
       await userRemove(ids);
       await tableApi.query();
-      checked.value = false;
     },
   });
 }
@@ -201,7 +192,7 @@ const { hasAccessByCodes } = useAccess();
     <div class="flex h-full gap-[8px]">
       <DeptTree
         v-model:select-dept-id="selectDeptId"
-        class="w-[260px]"
+        :width="260"
         @reload="() => tableApi.reload()"
         @select="() => tableApi.reload()"
       />
@@ -221,7 +212,7 @@ const { hasAccessByCodes } = useAccess();
               {{ $t('pages.common.import') }}
             </a-button>
             <a-button
-              :disabled="!checked"
+              :disabled="!vxeCheckboxChecked(tableApi)"
               danger
               type="primary"
               v-access:code="['system:user:remove']"

apps/web-antd/src/views/tool/gen/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { onMounted, ref } from 'vue';
+import { onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
@@ -11,8 +11,8 @@ import { message, Modal, Popconfirm, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
 import {
-  tableCheckboxEvent,
   useVbenVxeGrid,
+  vxeCheckboxChecked,
   type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@@ -78,14 +78,9 @@ const gridOptions: VxeGridProps = {
   id: 'tool-gen-index',
 };
 
-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });
 
 onMounted(async () => {
@@ -177,7 +172,6 @@ function handleMultiDelete() {
     onOk: async () => {
       await genRemove(ids);
       await tableApi.query();
-      checked.value = false;
     },
   });
 }
@@ -203,7 +197,7 @@ function handleImport() {
         </a>
         <Space>
           <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
             danger
             type="primary"
             v-access:code="['tool:gen:remove']"
@@ -212,7 +206,7 @@ function handleImport() {
             {{ $t('pages.common.delete') }}
           </a-button>
           <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
             v-access:code="['tool:gen:code']"
             @click="handleBatchGen"
           >