60.实现elementUI表格点击某一行选中勾选框

前言：

项目中需要做到除了勾选表格第一列勾选框去选中数据外，还要通过点击某一行任何地方，都可以勾选到这条数据，并且要做到选中的数据不能重复，记录一下：

（全选和选中勾选框的方法就不写了这里只写通过点击行选中勾选框）

1.首先给<el-table>添加 ref='multipleTable' 和 @row-click="handleClickTableRow"

<el-table ...... ref="multipleTable" @row-click="handleClickTableRow">......
</el-table>

2.在handleClickTableRow方法里，通过判断结果数组里是否存在这条数据而决定是否添加进去

// 点击行勾选数据
handleClickTableRow(row,event,column){// checkNum和isCheck是批量操作按钮和已选几条展示的依据this.checkNum = 0this.isCheck = false// 如果status为无效不让勾选if(row.status == '0'){return}else{// 选中这行数据 勾选框会勾选上this.$refs.multipleTable.toggleRowSelection(row)if(this.batchDeleteArr.length > 0){// 如果结果数组不为空，判断所选的这条是否在结果数组里if(JSON.stringify(this.batchDeleteArr).indexOf(JSON.stringify(row)) == -1){this.batchDeleteArr.push(row)}else{// 所选数据在结果数组里，那就要清除掉它，不然会造成数据重复this.batchDeleteArr.map((item,index) =>{if(item.id == row.id){this.batchDeleteArr.splice(index,1)}})}}else{this.batchDeleteArr.push(row)}}// 这里几行代码是根据结果数组是否有值判断批量操作按钮和已选几条展示是否需要解除置灰和展示if(this.batchDeleteArr.length > 0){this.checkNum = this.batchDeleteArr.lengththis.isCheck = true}else{this.isCheck = false}
}

3.又发现一个问题，就是在全选后取消全选，之后再通过点击行，就不能勾选上数据了，解决方法就是：

（1）data里设置allCheck:false,

（2）在全选方法里设置 this.allCheck = true

（3）在上边的点击行勾选数据方法里，在this.$refs.multipleTable.toggleRowSelection(row) 这行代码前，添加判断，通过判断allCheck是否为true，从而设置结果数组为空：

if(this.allCheck == true){this.batchDeleteArr = []this.allCheck = false
}

4.按照第3条更改之后，发现，全选后取消全选，之后通过点击行，是能勾选上数据，但是，这样一来，全选后，不取消全选的情况，如果点击行，就没办法取消勾选了，经过一系列操作后，有了以下解决方法：

（1）取消第3条添加的代码

（2）在handleClickTableRow方法里，更改代码如下：

// 点击行勾选数据
handleClickTableRow(row,event,column){// checkNum和isCheck是批量操作按钮和已选几条展示的依据this.checkNum = 0this.isCheck = false// 如果status为无效不让勾选if(row.status == '0'){return}else{if(this.batchDeleteArr.length > 0){// 如果结果数组不为空，判断所选的这条是否在结果数组里if(JSON.stringify(this.batchDeleteArr).indexOf(JSON.stringify(row)) == -1){this.batchDeleteArr.push(row)this.$refs.multipleTable.toggleRowSelection(row,true)}else{// 所选数据在结果数组里，那就要清除掉它，不然会造成数据重复this.batchDeleteArr.map((item,index) =>{if(item.id == row.id){this.batchDeleteArr.splice(index,1)this.$refs.multipleTable.toggleRowSelection(row,false)}})}}else{this.batchDeleteArr.push(row)this.$refs.multipleTable.toggleRowSelection(row,true)}}// 这里几行代码是根据结果数组是否有值判断批量操作按钮和已选几条展示是否需要解除置灰和展示if(this.batchDeleteArr.length > 0){this.checkNum = this.batchDeleteArr.lengththis.isCheck = true}else{this.isCheck = false}
}

5.还有一点需要改的就是，点击操作列，也会勾选上数据，这显然是不对的，需要在判断status是否为0之前先判断event.label是否等于“操作”，如果等于“操作”，就return。

在handleClickTableRow方法里，更改代码如下：

// 点击行勾选数据
handleClickTableRow(row,event,column){// checkNum和isCheck是批量操作按钮和已选几条展示的依据this.checkNum = 0this.isCheck = falseif(event.label == '操作'){return}else{// 如果status为无效不让勾选if(row.status == '0'){return}else{if(this.batchDeleteArr.length > 0){// 如果结果数组不为空，判断所选的这条是否在结果数组里if(JSON.stringify(this.batchDeleteArr).indexOf(JSON.stringify(row)) == -1){this.batchDeleteArr.push(row)this.$refs.multipleTable.toggleRowSelection(row,true)}else{// 所选数据在结果数组里，那就要清除掉它，不然会造成数据重复this.batchDeleteArr.map((item,index) =>{if(item.id == row.id){this.batchDeleteArr.splice(index,1)this.$refs.multipleTable.toggleRowSelection(row,false)}})}}else{this.batchDeleteArr.push(row)this.$refs.multipleTable.toggleRowSelection(row,true)}}}// 这里几行代码是根据结果数组是否有值判断批量操作按钮和已选几条展示是否需要解除置灰和展示if(this.batchDeleteArr.length > 0){this.checkNum = this.batchDeleteArr.lengththis.isCheck = true}else{this.isCheck = false}
}

60.实现elementUI表格点击某一行选中勾选框相关推荐

iview 动态控制 table中某一行select勾选框能否选中，以及某一行select勾选框能否显示(隐藏禁用的勾选框)。
如上图,这是一个vue页面中的table,在其columns中加了一个selection后,实现了多选/全选table行的功能: {type: 'selection',width: 60,align: ...
elementUI中的el-table勾选框设置默认勾选、禁用
elementUI中的el-table勾选框设置默认勾选.禁用最近项目中有这个一个需求:请求后端列表数据,根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态, 如果remark= ...
pyqt5在表格中添加单选框（勾选框）
先看效果图; 下面是添加后面勾选框的代码: self.cbs = []for r in range(self.rows): # 添加勾选for c in range(self.cols):if c = ...
饿了么UI elementUI中的el-table勾选框设置默认勾选、禁用
最近项目中有这个一个需求:请求后端列表数据,根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态, 如果remark="1",是勾选状态且该勾选框变为禁用状态:反 ...
QTableView 表格中插入图片、勾选框、下拉框
QTableView 表格中插入图片.勾选框.下拉框效果图 QT的Delegate,可以实现TableView中每一个单元格的显示形式.本例利用Delegate的paint函数绘制出图片.勾选框.下 ...
ES6中展开运算符的深拷贝浅拷贝理解(ElementUI表格点击编辑，模态框内容与表格数据一起变的问题)
项目中遇到的问题: 在elementui中表格点击按钮传值的时候,通过bus中的$emit传对象,在弹出的模态框中用bus的$on接收对象,然后对传的对象进行改变,结果发现改变了原表格的数据. 然后就 ...
button layui 点击事件_Layui 带多选框表格监听事件以及按钮自动点击写法实例
不话不多说了,直接上代码吧: 获取选中行数据获取选中数目验证是否全选提交选择 id运动名运动时长运动类型 var msg=""; var idlist="" ...
html 勾选框点击文字勾选,ztree点击文字勾选checkbox，radio实现方法
ztree的复选框checkbok,单选框radio是用背景图片来模拟的,所以点击文字即使用label括起checkbox,radio文字一起,点击文字也是无法勾选checkbox. 要想点击ztre ...
layui把表格重载为最新状态，复选框选中去重
layui把表格重载为最初始的状态前端自己操作不调用接口 1.把第一个表格选中的数据显示到第一个表格的下方 2.处理成下边展示的数据需要合并单元格 3.点击删除第一个表格需要重载为不选中无值的状态, ...

60.实现elementUI表格点击某一行选中勾选框

前言：

60.实现elementUI表格点击某一行选中勾选框相关推荐

最新文章

热门文章