el-table 选择框根据条件设置某项不可选中的操作代码
作者：程序猿小野
这篇文章主要介绍了el-table 选择框根据条件设置某项不可选中的操作代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
el-table 选择框根据条件设置某项不可选中的操作代码
效果如图：实现某条数据不可选，其他数据可选
核心代码： <el-table-column type="selection" width="55" :selectable="selectable"></el-table-column> 在选择框的列上加上 :selectable="selectable" ，selectable是一个函数，返回值为false的时候，表格列禁止选中
<template>
<div class="hello">
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
tableData: [
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}
]
};
},
methods: {
selectable(row, index) {
// 这里可以根据具体业务逻辑判断，returnfalse就是不可选择，row为表格行数据
// 设置第四行为不可选中
if (index == 3) {
return false;
} else {
return true;
}
}
}
};
</script>
<style scoped>
</style>补充：
elementUI实现表格多选中指定某些行不能被选中
今天项目中遇到一个需求，就是elementUI表格多选中需要符合要求的列才能被选中，否着该行不可选。
查看了下elementUI文档，找到了 selectable 属性：
该属性的意思就是，通过判断绑定方法的返回值是否为true来判断该行是否可选。接下来就根据文档的说明来编写代码就好了。
在选择列元素中添加该属性，如果表格中还未添加选择列则先添加：
<el-table-column type="selection" width="55" :selectable="judgeSelect"></el-table-column>
定义方法：
judgeSelect(row,index){
return row.data == 1 // 返回true该行可选，返回false则不可选
}到此这篇关于el-table 的选择框如何根据条件设置某项不可选中的文章就介绍到这了,更多相关el-table 选择框根据条件设置某项不可选中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！