Element-UI：如何实现表格组件el-table多选场景下根据数据对某一行进行禁止被选中？

如何实现表格组件el-table多选场景下根据数据对某一行进行禁止被选中？

在使用 Element UI 的 Table 组件时，如果你想要禁用某一行的选中（特别是在多选模式下），可以通过自定义行的 selectable 属性来实现。selectable 属性接受一个布尔值或者一个返回布尔值的函数，用来控制某一行是否可以被选中。

下面是一个基本的示例，展示如何在 Element UI 的 Table 组件中禁用某一行的选中：

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    ref="multipleTable"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        disabled: false // 自定义属性，标记该行是否可以被选中
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        disabled: true // 自定义属性，标记该行不可以被选中
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        disabled: false
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        disabled: false
      }]
    };
  },
  methods: {
    // 控制行的选中状态
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 禁用某一行的选中
    selectable(row, index) {
      return !row.disabled;
    }
  }
};
</script>
 
<!-- 需要在 el-table 上添加 :selectable 属性来应用禁用逻辑 -->
<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    :selectable="selectable"
    ref="multipleTable"
    style="width: 100%">
    <!-- ... 其他代码 ... -->
  </el-table>
</template>

相关链接

1. 官方文档