vben admin 实现实时监听表格复选框
1、找到其官网：Vxe Table ：https://vxetable.cn/#/table/api?apiKey=table
2、根据 checkbox-change 、checkbox-all 2个事件去监听到你当前勾选的数据
import {
commonSearchScheam,
commonGridConfig,
festivalSearchFormSchema,
festivalColumns
} from '../data'; // 表格配置
const isDisabled = ref(true)
const formOptions = {
...commonSearchScheam,
showCollapseButton: false,
schema: festivalSearchFormSchema,
}
// 节日祝福 - 列表部分
const gridOptions: VxeGridProps = {
columns: festivalColumns as any,
height: 'auto',
...commonGridConfig,
headerAlign: 'center', // 表头单元格居中
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return getList({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
};
const gridEvents: VxeGridListeners<any> = {
async checkboxChange(e:any) {
console.log('e---e.records--1',e)
if(e.records && e.records.length > 0) {
isDisabled.value = false
} else {
isDisabled.value = true
}
},
async checkboxAll(e: any) {
console.log('e---e.records--2',e)
if(e.records && e.records.length > 0) {
isDisabled.value = false
} else {
isDisabled.value = true
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({ gridOptions, formOptions,gridEvents });
// 勾选了复选框，禁用解除，否则禁用不可点击
<Button :disabled="isDisabled" class="warn-btn mr-[10px]" @click="openBatchModal">批量管理</Button>
控制台输出：
