Vue2 Element多选表格row-click选取与行禁用方式实用指南
平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“Vue2 Element多选表格row-click选取与行禁用方式”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。
目录
- 前言
- 一、用row-click事件实现选取行
- 二、禁选行
- 总结
前言
点击行, 和点击选取框都不再能进行选取.
一、用row-click事件实现选取行
type=selection提供的选取框实在是太小了, 为了选取便于采用如下所示方法来做行选取:
rowClick(row) { // row-click事件处理函数
this.$refs.tableRef.toggleRowSelection(row)
},
handleSelectChange(selection) { // selection-change事件处理函数
this.multipleSelection = selection // 可有可无, 将存有所有选取项的数组存入data
},
二、禁选行
我说的是点击行和点击选取框都不再能进行选取.
有做行禁选取的需求, 今天看到有采用selectable完成的, 但是只能禁用勾选框选取, 同时不能阻止基于row-click事件进行的选取.
需求是当行数据对象row中cTotAmt和dTotAmt不等时该行禁选, 那么在row-click事件处理函数起始进行对两值的判定, 不符合条件则直接return false, 配合selectable采用达到彻底禁选的目的.
<el-table-column
type="selection"
:selectable="selectHandle"
> <!-- selectable, 如果是勾选框列有禁用需求就要加在勾选框列. -->
</el-table-column>
selectHandle(row) { // 也可以获取到index列下标
// 这个函数会在生成列时自动对所有行数据对象执行, 如果当前row进入该函数执行结果为false那么该单元格selectable=false.
if (row.crTotAmt !== row.drTotAmt) {
return false
}
return true // 满足条件一定记得返true, 不然全都会禁选
},
rowClick(row) { // row-click事件处理函数
if (row.crTotAmt !== row.drTotAmt) { // 禁选借代不平衡
return false
}
this.$refs.tableEBEC400U.toggleRowSelection(row)
const temObj = {
evidNo: row.evidNo,
drTotAmt: this.numberToCurrencyNo(row.drTotAmt)
}
this.resDisplayRawParams = temObj
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多兼容脚本之家。
您可能感兴趣的文章:
- 如何用vue2+element-ui实现多行行内表格编辑
- vue2+element-ui新增编辑表格+删除行功能
- Vue2+Element-ui实现el-table表格自适应高度的案例
- vue2 element 实现表格点击详情得到时保留查询参数的示例
- vue2采用 element表格展开功能渲染子表格的方式
- element UI 2.15.13与vue2.0表格勾选回显关键demo
- Vue2 Element el-table多选表格控制选取的思路解读
相关资讯
-
08.26
掌握有效的Excel数据比对实用技巧提升工作效率
-
08.26
有效解决Excel循环引用警告的几种实用做法
-
08.26
掌握ai数据报告编写实用技巧以提升工作效率
-
08.26
如何高效利用ai数据采集公司提升企业数据处理能力
-
08.26
掌握数据统计AI的做法助力高效决策与分析
-
08.26
掌握国产AI PPT的实用技巧，轻松提升演示文稿的吸引力与效果
游戏推荐
推荐专题
热门阅读
推荐下载
-
-
下载
- |
-
-
下载
- 《行尸走肉第一章》免安装中文汉化硬盘版下载
- 单机|436 MB
- 一款以动作冒险为主题的游戏
-
-
下载
- 《街头霸王X铁拳》免安装中文汉化硬盘版下载
- 单机|111MB
- 一款非常好玩的格斗游戏
-
-
下载
- |
-
-
下载
- 《暗黑破坏神3》免安装繁体中文正式版下载
- 单机|7630 MB
- 一款以角色扮演为主题的游戏
-
-
下载
- 《马克思佩恩3》免安装硬盘版下载
- 单机|27033 MB
- 一款以第三人称射击为主题的游戏