前言
当表格设置
selection开启复选框可选时，您可能需要禁用一些业务条件成立的行数据。
例如，禁用表格中所有地址为秦皇岛市海港区居民的行数据，复选框无法选中，如下图所示效果：
实现方法
表格文档：/#/zh-CN/component/table
ElementUI 提供了该需求的解决方案，上述文档连接中打开搜索selectable。
该属性接收一个函数，您只需要在函数中做出判断，返回ture / false即可确定该行是否可选。
完整示例
为您提供了干净整洁的demo，该示例可直接复制运行，前提是环境存在（vue/elementui）。
<template><div><el-table :data="tableData"><!-- type必须设置为selection --><el-table-columntype="selection":selectable="selectable"></el-table-column><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></div></template><script>export default {data(){return {// 示例表格数据tableData: [{date: '-05-02',name: '李栓蛋',address: '秦皇岛市海港区居民'},{date: '-05-04',name: '李四',address: '上海市普陀区金沙江路 1517 弄'},{date: '-05-01',name: '王五',address: '秦皇岛市海港区居民'},{date: '-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>
