elementui 表格复选框根据列表状态设置禁用效果

在Element UI中，可以使用表格组件（el-table）的row-class-name属性或者cell-class-name属性来为表格行或单元格设置特定的类名。结合三元表达式，可以根据数据状态动态设置禁用样式。

以下是一个示例代码，展示了如何根据数据状态禁用复选框：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55"
      :selectable="checkSelectable"
    >
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', status: 'active' },
        { id: 2, name: 'Jane', status: 'inactive' },
        // 更多数据...
      ],
    };
  },
  methods: {
    handleSelectionChange(selection) {
      // 处理选中项
    },
    checkSelectable(row, index) {
      // 根据状态决定是否禁用复选框
      return row.status === 'active';
    },
  },
};
</script>

在这个例子中，checkSelectable 方法决定了哪些行的复选框是可选的（返回 true）和不可选的（返回 false）。在这个函数中，你可以根据你的数据状态逻辑来返回相应的布尔值。如果状态为 'active'，则复选框为可选状态；否则为不可选状态。