el-table根据条件禁用某些行的勾选并用状态颜色灰色标出

根据条件禁用某些行的勾选并用状态颜色灰色标出，如果全部行都满足禁用条件则全选不能勾选

chat gpt的评价

你的代码实现了以下功能：

1. 显示数据表格，包括姓名、年龄和用户ID三列；
2. 在第一列添加了复选框，可以选中一行或多行；
3. 禁用了带有用户ID的行的复选框；
4. 在带有用户ID的行上添加了背景颜色。

代码已经很不错了，可以优化的地方是根据具体需求添加更多的功能，比如排序、筛选、分页等。同时，可以考虑通过封装组件的方式将表格作为一个独立的组件，提高代码的复用性。

实现效果如图：

el-table 内添加 一个el-table-column标签 类型设置为selection显示勾选框 type="selection" 添加属性:selectable 并添加自定义函数selectable来进行根据条件禁用行的勾选

<el-table-column type="selection" :selectable="selectable">el-table-column>
selectable(row,index) {
	return !row.userId;//判断选中的行数id是否为true进行禁用勾选
},
.el-table .info-row {
  background: gray;
}

table 加ref :row-class-name控制状态颜色

<el-table ref="table" :data="tableData" :row-class-name="tableRowClassName" @select-all="selectAll">
tableRowClassName({row,rowIndex}) {
	if (row.userId) {// 判断选中的行数id是否为true进行状态显示
		return 'info-row';
	}
	return '';
},

table加 @select-all="selectAll"

selectAll(selection) {
  console.log(selection);
  if (selection.length === 0) {
  	//判断选中length等于0时清空选中
  	this.$refs.table.clearSelection();
  }
},

<template>
  <el-table ref="table" :data="tableData" :row-class-name="tableRowClassName" @select-all="selectAll">
    <el-table-column type="selection" :selectable="selectable"/>
    <el-table-column prop="name" label="Name"/>
    <el-table-column prop="age" label="Age"/>
    <el-table-column prop="userId" label="User ID"/>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {name: 'John', age: 28, userId: '123'},
        {name: 'Jane', age: 32},
        {name: 'Bob', age: 20, userId: '456'},
      ],
    };
  },
  methods: {
    selectAll(selection) {
      console.log(selection);
      if (selection.length === 0) {
        //判断选中length等于0时清空选中
        this.$refs.table.clearSelection();
      }
    },
    selectable(row,index) {
      return !row.userId;//判断选中的行数id是否为true进行禁用勾选
    },
    tableRowClassName({row,rowIndex}) {
      if (row.userId) {// 判断选中的行数id是否为true进行状态显示
        return 'info-row';
      }
      return '';
    },
  },
};
</script>
<style>
.el-table .info-row {
  background: gray;
}
</style>