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

布满荆棘的人生 2022-08-31 05:57 277阅读 0赞

## 前言 ##

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

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

![在这里插入图片描述][449108e5b078493d89a24e0a6736f0fa.png]

## 实现方法 ##

> 表格文档：[https://element.eleme.cn/\#/zh-CN/component/table][https_element.eleme.cn_zh-CN_component_table]

ElementUI 提供了该需求的解决方案，上述文档连接中打开搜索 `selectable` 。  
![在这里插入图片描述][5a809a88816647228d6c42d3b14ce2fa.png]  
该属性接收一个函数，您只需要在函数中做出判断，返回 `ture / false` 即可确定该行是否可选。

## 完整示例 ##

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

<template>
      <div>
        <el-table :data="tableData">
          
          
          <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>

[449108e5b078493d89a24e0a6736f0fa.png]: /images/20220829/77fd9ccfa90d450cab747f81bf24c546.png
[https_element.eleme.cn_zh-CN_component_table]: https://element.eleme.cn/#/zh-CN/component/table
[5a809a88816647228d6c42d3b14ce2fa.png]: /images/20220829/f0baa8e2a1894c9287c3a3efb7e11216.png