element-ui table 表格 如何实现全部展开和全部收起!

我们在使用element 的table表格时,由于每行的数据较多,我们可能需要展开功能,如下图

展现功能就实现了,然后我们可能会碰到这个场景:我们需要表格一开始数据是全部展开或者是全部收起的状态。

el-table已经给我们提供了这样的功能了,:default-expand-all=" true"就是开始全部展开,反之就是开始全部收起。

那么问题来了:假设我们需要通过一个按钮,然后动态让表格在全部展开和全部收起之间进行切换,于是我们想到了动态设置default-expand-all的值。


但是你会发现!default-expand-all只有初始值有效,动态设置并无效果,因为default-expand-all变化的时候表格并没有重新渲染。


那还有办法解决吗?答案是有的。el-table提供了另外一种展开的办法,那就是 属性row-key 和 expand-row-keys


流程:


      row-key:绑定行字段,如id -   row-key:“id”


     expand-row-keys: 需要展开的行, 是数组,假设 row-key:“id”, 每一条数据的id:1,id:2..., 那么 expand-row-keys=“[1,2,...]”


    所有已开启需要全部展开的话,可以遍历数据,把每一条数据的id(假设是id)都放进expand-row-keys,就能全部展开的,然后点击收起的时候,令expand-row-keys = [] 就能全部收起了。


    反过来也是一样的。


   如果你觉得不错,就给个赞呗


落魄前端-小陈
0
0
0
评论
浏览
收藏