Vue.js 中使用 Element UI 的表格列选择selectable 可选控制

实现步骤

1.定义 selectable 函数： 在 Vue 组件的 methods 或者 computed 属性中定义一个函数，该函数接收两个参数：当前行的数据 row 和行的索引 index。函数应返回一个布尔值，指示该行是否可被选中。
2.绑定 selectable 函数： 在 <el-table-column> 标签中，使用 type="selection" 创建一个选择列，并通过 :selectable 绑定上面定义的函数。
3.应用样式： 可以添加额外的类名来修改选择列的样式，例如添加 label-class-name="DisabledSelection" 来应用特定的 CSS 类。

<template>
  <el-table :data="tableData">
    <el-table-column
      type="selection"
      fixed
      :selectable="handleSelectable"
      label-class-name="DisabledSelection"
      width="58"
    ></el-table-column>
    <!-- 其他列... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, reimburseState: '0', /* ...其他属性 */ },
        { id: 2, reimburseState: '1', /* ...其他属性 */ },
        // 更多数据...
      ]
    };
  },
  methods: {
    handleSelectable(row, index) {
      // 如果状态不等于 '0'，则不允许选择
      return row.reimburseState === '0';
    }
  }
}
</script>