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>
相关推荐
StrongerIrene6 分钟前
rs build 的process.env的值undefined解决方案
开发语言·javascript·ecmascript
前端小巷子16 分钟前
跨域问题解决方案:JSONP
前端·javascript·面试
just小千1 小时前
重学React(二):添加交互
javascript·react.js·交互
qq_589568101 小时前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
菌菇汤2 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶2 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
摸鱼仙人~2 小时前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
qq_411671982 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
vvilkim3 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿3 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js