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 选择框根据条件设置某项不可选中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue引入新版 vue-awesome-swiper插件填坑问题
这篇文章主要介绍了vue引入新版 vue-awesome-swiper插件填坑问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-01-01解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
这篇文章主要介绍了解决vue axios跨域 Request Method: OPTIONS问题(预检请求),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08Vue3中使用Element Plus时el-icon无法显示的问题解决
我们的Vue前端一般都是用的ElementUI,其中按钮可能用到的比较多,官方里面有自带的一些默认图标,下面这篇文章主要给大家介绍了关于Vue3中使用Element Plus时el-icon无法显示的问题解决,需要的朋友可以参考下2022-03-03浅谈vue中computed属性对data属性赋值为undefined的原因
本文主要介绍了浅谈vue中computed属性对data属性赋值为undefined的原因,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-02-02
最新评论