elemnet UI table 根据 数据状态，禁用 多选框 并 改变背景颜色

element 表格如下

<el-table :row-class-name="tableRowClassName"  ref="pageTable" row-key="oid" :data="tableData"  style="width: 100%">
  <el-table-column type="selection" width="55" reserve-selection :selectable="selectEvent">
  </el-table-column>
  <el-table-column  type="index" label="序号">
  </el-table-column>
  <el-table-column prop="clause" label="标题1" width="150">
  </el-table-column>
  <el-table-column prop="chapter" label="标题2" width="150">
  </el-table-column>
  <el-table-column prop="reguNumber" label="标题3" width="150">
  </el-table-column>
  <el-table-column prop="title" label="标题4">
  </el-table-column>
</el-table>

1、禁用多选框

在表格的 selection  上 增加  :selectable="selectEvent"   内容

在methods 中 增加如下函数

methods:{

  selectEvent(row){
      if(row.alreadyAdded){  // 这里是根据 alreadyAdded 的 状态 判断的  禁用 多选框，返回true  
                      不禁用 返回false
          return false;
       }else {
          return true;
       }
   }
}

2、根据状态 更改表格颜色

在表格的 table 上 增加  :row-class-name="tableRowClassName"   内容

methods:{
    tableRowClassName(row){
      if(row.row.alreadyAdded){
        return 'success-row';
      }else {
        return "";
      }
    },
    
}

根据不同的状态返回不同的 样式名字  然后在样式中 增加如下内容

< style  lang = "less"  scoped>

/deep/.success-row >td {
  background: #F6F6F6 !important;
}
</style>

 这里面可以 用 scoped  的；只需要在样式 前面增加深度选择器  /deep/  ，具体 可自行在网上查找，其用法。

参考 多个博客，具体不再追加；需要追加请作者留言，必追加出处。