elementui表格复选框置灰、禁止选择、回显

最新推荐文章于 2024-03-12 15:04:40 发布

weixin_49913387

最新推荐文章于 2024-03-12 15:04:40 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/weixin_49913387/article/details/123185358

这篇博客详细介绍了如何在前端使用el-table组件，并通过`selectableFun`函数实现行选择条件判断。当行id为0时，禁止选择；否则允许选择。同时，展示了如何根据后台返回的数据进行回显，通过`toggleRowSelection`方法设置已选状态。这有助于理解Vue.js中表格组件的高级用法。

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

<el-table :data="tableData" v-loading="loading" ref="multipleTable" border stripe > <el-table-column type="selection" :selectable='selectableFun' width="55"></el-table-column>@TOC

    selectableFun(row,index){
      if (row.id==0) {//你需要判断的条件
        return 0;//不可勾选
      }else{
        return 1;//可勾选
      }
    },

// 回显


          this.$nextTick(() => {
            res.data.forEach((d, index) => {
              if (d.id== 1) {
                //回显条件
                this.$refs.multipleTable.toggleRowSelection(d, true);
              }
            });
          });