ElementUI - ＜el-table＞ 表格 selection 设置的复选框禁止选中某些行

前言

当表格设置 selection 开启复选框可选时，您可能需要禁用一些 业务条件成立 的行数据。

例如，禁用表格中所有 地址 为 秦皇岛市海港区居民 的行数据，复选框无法选中，如下图所示效果：

实现方法

表格文档：https://element.eleme.cn/#/zh-CN/component/table

ElementUI 提供了该需求的解决方案，上述文档连接中打开搜索 selectable 。

该属性接收一个函数，您只需要在函数中做出判断，返回 ture / false 即可确定该行是否可选。

完整示例

为您提供了干净整洁的demo，该示例可直接复制运行，前提是环境存在（vue/elementui）。

<template>
  <div>
    <el-table :data="tableData">
      
      <!-- type必须设置为selection -->
      <el-table-column
	  type="selection"
      :selectable="selectable"
	  >
      </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>
  </div>
</template>

<script>
export default {
  
  data(){
    return {

       // 示例表格数据
       tableData: [
        {
          date: '2016-05-02',
          name: '李栓蛋',
          address: '秦皇岛市海港区居民'
        },
        {
          date: '2016-05-04',
          name: '李四',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王五',
          address: '秦皇岛市海港区居民'
        },
        {
          date: '2016-05-03',
          name: '张三',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },

  methods: {

    /**
     * 根据条件禁用行复选框
     * 函数返回值为false则禁用选择(反之亦然)
     * @param {Object} row - 行数据
     * @param {String} index - 索引值
     * @return Boolean
     */
    selectable: function(row, index)
    {
        // 地址不是 "秦皇岛市海港区居民" 才能被选中
        if(row.address != '秦皇岛市海港区居民'){
          return true;
        }

        // 函数必须有返回值且是布尔值
        // 页面刷新后该函数会执行 N 次进行判断(N 为表格行数)
        // 如果没有返回值则默认返回false(全部无法选中)
    },
  }
}
</script>

<style></style>