vxe-table全选禁用并保留选中项

前端的南姐2023-09-05 9:08

需求：1、新建时全选可用，提交后全选不可用；2、提交后新建时选中的记录还要保持选中状态

官网上写的是可以通过 strict 设置为严格模式，当表格中不存在有效数据时列头复选框为禁用状态。

通过设置strict可以实现第一个需求，但是会导致已选中项没有勾选。

解决：将复选框列重新按照自己的需求写逻辑，然后在表格的checkbox-change事件中修改isCheck的值。

下面的代码只是简略记录，不能执行

<vxe-table
        ref="vxeTable"
        :data="tableList"
        :checkbox-config="{
          strict: true,
          checkMethod: checCheckboxkMethod
        }"
        @checkbox-change="changeRowSelection"
      >
  <vxe-table-column type="checkbox" width="60">
    <template v-slot="{ row }">
        <a-checkbox
            :checked="row.isCheck"
            :disabled="condition1"
        ></a-checkbox>
    </template>
  </vxe-table-column>
......
</vxe-table>

......
<script>
checCheckboxkMethod(){
    //这里写你的条件
    return false;//禁用  ture为可用
}
changeRowSelection(selection: {
    checked: boolean;row:你的类型;
  }
){
    const { checked, row } = selection;
    row.isChecked= checked;
}
</script>