表格中某一行选中确认后，禁用掉，不让选择且变灰色

最新推荐文章于 2023-10-19 11:05:18 发布

靓靓的圆子

最新推荐文章于 2023-10-19 11:05:18 发布

阅读量1.7k

点赞数 1

分类专栏： element-ui 表格禁用数据文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/weixin_45646663/article/details/120975633

版权

element-ui 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

表格

13 篇文章 0 订阅

订阅专栏

禁用数据

3 篇文章 0 订阅

订阅专栏

1，用的el-table，我这里是把选中确认后的数据跟表格中的数据对比，是选中了的数据就set一个字段Confirmed = true，然后:row-class-name来改这一行的颜色，
再:selectable来禁用复选框

<el-table
            :max-height="maxTable"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            :header-cell-style="{ 'text-align': 'center' }"
            :row-class-name="tableRowClassName"
          >
              <!-- prop='Confirmed' -->
            <el-table-column
              type="selection"
              width="55"
              :selectable='checkboxT'
              align="center" 
            >

tableRowClassName({row, rowIndex}) {
      if (row.Confirmed == true) {
          return 'warning-row';

      }else {
          return '';
      }
    },

//复选框
checkboxT(row, rowIndex){
  console.log(1832,row)
  if (row.Confirmed == true) {
      return false;//禁用
  }else {
    return true;//不禁用
  }
},