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

需求: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>
相关推荐
遂心_17 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
遂心_18 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy18 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy18 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
一个不爱写代码的瘦子19 小时前
迭代器和生成器
前端·javascript
源猿人1 天前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin1 天前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖1 天前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬1 天前
Promise 的场景和最佳实践
前端·javascript
Asort1 天前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript