Vue2 Element多选表格row-click选取与行禁用方式
更新时间：2026年04月15日 15:05:31 作者：白瑕
文章介绍了在表格中实现行选取的方法,首先,使用row-click事件实现行选取；其次,针对特定条件（如cTotAmt和dTotAmt不等）,在row-click事件处理函数中直接returnfalse,禁用该行选取；最后,结合selectable使用达到彻底禁行选取的目的
前言
点击行, 和点击选取框都不再能进行选取.
一、用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 width="40" 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
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue之监听器的使用案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要给大家介绍了关于Vue使用new Blob()实现不同类型的文件下载功能的相关资料,在Vue项目中,经常用Blob二进制进行文件下载功能,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue组件设计之多列表拖拽交换排序,常见的场景有单列表拖拽排序，多列表拖拽交换排序，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
keepalive是Vue的内置组件,作用是将组件缓存在内存当中,防止重复渲染DOM,属于消耗内存获取速度,这篇文章主要介绍了vue3项目keepAlive使用方法,主要将keepaliev在vue3.0中的用法,需要的朋友可以参考下2024-03-03
这篇文章主要为大家详细介绍了Vue实现记事本功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
关于在vue 中使用百度ueEditor编辑器的方法实例代码
这篇文章主要介绍了在vue 中使用百度ueEditor编辑器的方法实例代码 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
在Vue3中,defineProps()函数是定义和接收组件属性的主要方式,通过简单定义或对象定义,开发者可以灵活地接收并处理组件上的属性值,简单定义方式通过数组传递属性名,而对象定义则可以约束属性的数据类型、默认值及是否必须传递等2024-09-09
Vue.js中this如何取到data和method里的属性详解
methods属性是一个对象,通常我们会在这个对象中定义很多的方法,下面这篇文章主要给大家介绍了关于Vue.js中this如何取到data和method里的属性,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue中pc移动滚动穿透问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要为大家详细介绍了Vues实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论