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>
相关推荐
hemoo9 分钟前
如何让echart的lengend在指定位置换行
javascript·echarts
哟哟耶耶13 分钟前
Starting again company 03
前端·javascript·vue.js
Chloe_lll21 分钟前
threejs(七)PBR材质
开发语言·javascript·材质
敲敲了个代码1 小时前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
开发语言·前端·javascript·学习·uni-app
不一样的少年_2 小时前
1024程序员节:用不到100行代码做个“代码雨屏保”装X神器(附源码)
前端·javascript·浏览器
阿奇__2 小时前
el-table默认排序设置
前端·javascript·vue.js
郑板桥304 小时前
TypeScript:npm的types、typings、@type的区别
javascript·typescript·npm
JinSoooo4 小时前
pnpm monorepo 联调:告别 --global 参数
开发语言·javascript·ecmascript·pnpm
郝学胜-神的一滴4 小时前
Cesium绘制线:从基础到高级技巧
前端·javascript·程序人生·线性代数·算法·矩阵·图形渲染
摸着石头过河的石头6 小时前
错误处理:构建健壮的 JavaScript 应用
前端·javascript