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>
相关推荐
山河木马9 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
努力只为躺平13 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手15 分钟前
大保剑:Promise的有趣体验
javascript
李大玄16 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵16 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
sunbyte29 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
谦哥1 小时前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
心在飞扬1 小时前
理解JS事件环(Event Loop)
前端·javascript
敲代码的玉米C1 小时前
深入理解链表反转:从基础到进阶的完整指南
javascript
山有木兮木有枝_2 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范