ElementUI el-table表格 selection 设置的复选框禁止选中某些行
背景
当表格设置 selection 开启复选框可选时,您可能需要禁用一些 业务条件成立 的行数据。
例如,禁用表格中所有 地址 为 秦皇岛市海港区居民 的行数据,复选框无法选中,如下图所示效果:
实现方法:
elementui文档:https://element.eleme.cn/#/zh-CN/component/table
完整示例
<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>
注意:如果无效的话,可以用typeof
输出一下要判断的参数的类型