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>
相关推荐
lichenyang4532 分钟前
css模块化以及rem布局
前端·javascript·css
daols887 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
OEC小胖胖9 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水9 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06279 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台10 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴10 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust11 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
全宝12 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele12 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试