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 选择框根据条件设置某项不可选中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
BuildAdmin elementPlus自定义表头添加tooltip方法示例
这篇文章主要介绍了BuildAdmin elementPlus 自定义表头,添加tooltip实现方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
vite前端构建Turborepo高性能monorepo方案
这篇文章主要为大家介绍了vite前端构建Turborepo高性能monorepo方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-08-08
vite+vue3.0+ts+element-plus快速搭建项目的实现
本文将结合实例代码,介绍vite+vue3.0+ts+element-plus快速搭建项目的实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-06-06
Luckysheet 在vue中离线使用及引入报错的解决方案(推荐)
这篇文章主要介绍了Luckysheet 在vue中离线使用方法及引入报错的解决方案,将dist离线包在项目创建个文件夹放着,然后根据放置的位置在 index.html里面引入,下面通过案例给大家介绍我的项目里面放置的位置,需要的朋友可以参考下2022-10-10
详解vue2.0+vue-video-player实现hls播放全过程
这篇文章主要介绍了详解vue2.0+vue-video-player实现hls播放全过程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-03-03


最新评论