ElementUI根据某些状态判断复选框的状态实现

最新推荐文章于 2023-10-12 13:40:33 发布

BrightLD

最新推荐文章于 2023-10-12 13:40:33 发布

阅读量8.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： vue elementui 后台管理系统

本文链接：https://blog.youkuaiyun.com/BrightLD/article/details/89674238

Vue.js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Element UI的ElTable组件中使用selectable属性控制复选框的状态。通过自定义方法selectable，根据行数据判断CheckBox是否可勾选，实现灵活的数据选择功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table表格中根据某些状态来判断复选框是否可以勾选？

我们为多选框表格增加一个selectable属性，改属性仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选

//核心代码如下
         <el-table-column
            type="selection"
            width="55"
            :selectable="selectable"
          >
          </el-table-column>

这里根据我们的需求（需要和后台沟通，好为前端同学提供一个哦），进行判断即可。

methods: {
    //复选框控制
    selectable(row,index){
      if(row&&row.parentId){
         return false
      }
      else{
        return true;
      }
    },
  }

ps：这里的方法没有在别的地方调用，却实现了我们的功能，应该是eleUI封装好的，在我们获取到数据并进行渲染的时候判断好的。