Vxe Table checkbox-change用法

在Vue框架中使用Vxe Table（Vuetify Extensible Element Table）的checkbox-change事件，你可以按照以下步骤操作：

1. 安装并引入VxeTable组件：

   <x-table ref="table" :checkbox-change="checkboxChange" ...></x-table>

2. 在组件实例中定义`checkboxChange`方法，该方法会在每个checkbox状态改变时调用，参数通常包括被选中的行记录：

   methods: {
     checkboxChange(checkedRows) {
       console.log('Checkbox changed:', checkedRows);
       // 这里可以根据checkedRows执行相应的逻辑，比如更新状态或数据
     }
   },

3. 如果需要监听所有checkbox的全选状态变化，可以使用`selectAllCheckboxChange`方法，接收一个布尔值表示是否全选：

   methods: {
     selectAllCheckboxChange(checked) {
       console.log('All checkboxes selected:', checked);
       // 全选/取消全选操作
     }
   },

4. 控制复选框的显示与隐藏，可以通过`v-model`或`visible`字段动态设置：

   data() {
     return {
       showCheckboxes: true,
     };
   },
   methods: {
     toggleCheckboxes() {
       this.showCheckboxes = !this.showCheckboxes;
       if (this.showCheckboxes) {
         // 显示复选框
         this.$nextTick(() => {
           this.$refs.table.column[0].visible = true; // 假设列索引为0
         });
       } else {
         // 隐藏复选框
         this.$set(this.tableColumn, 0, { visible: false });
       }
     }
   },

5. 在打开复选框之前清空已选择项，可使用`clearCheckboxRow`方法：

   beforeOpenRow(row) {
     if (row.selectable && row.checked) {
       this.clearCheckboxRow(row); // 清除当前行的选择
     }
   },
   methods: {
     clearCheckboxRow(row) {
       row.checked = false;
     }
   },

记得在模板中绑定`selectable`属性以允许行被选择，如 `selectable="true"`。