ElementUI表格复选与行单选结合

时间:2024-04-01 13:18:05

在使用ElementUI的表格时遇到了复选/多选与行单选的问题,这里记录一下供以后回顾,如果能帮助其他遇到这个问题的小伙伴解决同样的问题就再好不过啦~

这里首先说一下我所设想的操作场景,用户可以*通过ElementUI的复选框和全选框和单击行的形式进行相应数据的获取,因为我使用的表格需要获取相应的客户编号与后台进行对接所以在前端获取相应值的时候一开始还是没有头绪的,查阅了相关资料后了解到了几个比较重要的点。

1.ElementUI中行单击时会触发的方法

在ElementUI中单机行时会触发row-click方法,该方法每次点击都会触发

2.ElementUI中复选框单击时会触发的方法

在ElementUI中复选框单击时触发的方法和行单机触发的方法是不同的,复选框触发select事件

3.ElementUI中全选单击时会触发的方法

在ElementUI中单机行时会触发select-all方法

简单的了解到了需要使用的三个方法后还需要告诉大家一些注意事项,如果需要让选择状态同步我们还需要在el-table节点中写上ref属性,这个属性后面状态同步时会用到。

ElementUI表格复选与行单选结合

select属于复选框事件,row-click为行单击事件,select-all为全选事件,ref为同步属性,记住这四个东西就很好办了,接下来只需要编写methods里的逻辑就行了。

data中包含一个gnoArray的空数组用于存贮所有选中状态的编号,一个selectallkey属性默认为0用于判断全选的状态,0为false状态是全选,1为true状态是取消全选

首先来看全选事件

ElementUI表格复选与行单选结合

全选事件中先进行状态判断后再进行相应的操作,如果全选就先清空gnoArray数组再循环tableData中的客户编号添加到gnoArray中,如果取消全选则直接置空该数组。

接下来是行单选

ElementUI表格复选与行单选结合

行单击时在方法的形参列表中我获取了当前点击的row对象,可以通过这个对象得到当前行的列值,最开始通过重写了remove方法来实现删除特定元素对象,然后创建了一个key用于标识当前被选择列的状态,接着循环整个gnoArray数组,如果数组中包含当前被选择的gno则说明现在需要做的是取消选择当前行,那么key的值也就是1,最后做了一个判断,来保存当前行的状态,然后通过this.$refs.eltableCurrentRow.toggleRowSelection(row,key);方法进行选中样式的改变,在该方法中有两个形参,一个是行对象,一个是显示状态,如果状态为true则出现勾选样式,如果为false则取消勾选。最后要注意的是我返回了这个key的状态,因为后面还要留给复选框继续使用。

最后是复选框

ElementUI表格复选与行单选结合

复选非常简单,只需要把复选行对象传给行单选方法使用就可以了,通过行单选的返回他会重新遍历数组返回状态从而通过这个状态让复选框的样式能正常显示,因为电脑没办法录制GIF这个也没办法给大家进行演示了,但是最终gnoArray内的值是正常获取的,因为还是萌新所以代码比较丑,思路可能并不是最好的,但是效果是实现了,只要思想不滑坡办法总比困难多。

ElementUI表格复选与行单选结合