element 的表格的extend

最新推荐文章于 2023-08-21 10:51:42 发布

平凡的故事

最新推荐文章于 2023-08-21 10:51:42 发布

阅读量336

点赞数 1

分类专栏： element ui vue 文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/m0_46698766/article/details/118549774

版权

vue 同时被 2 个专栏收录

9 篇文章

订阅专栏

element ui

8 篇文章

订阅专栏

这篇博客探讨了在使用ElementUI时遇到的问题——表格数据更新导致的折叠状态丢失。作者提出了一种解决方案，通过维护一个展开节点的ID数组，并在`expand-change`事件中检查和更新该数组，确保在数据重渲染时能正确保持表格的展开状态。具体实现包括在`expandChange`方法中，根据当前ID在数组中的位置进行添加或删除操作，从而达到折叠与展开的控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
这几天一直在忙的工作，今天特地发一个表格的extend 当我们在下面请求数据的时候然后就重新折叠起来了，因为数据的重新渲染导致的，然后我把当前的折叠节点id保存一下，当重新赋值的时候，让他直接展开。
在这里插入图片描述

我们会用带这个两个属性加一个方法看element ui的描述可知，key绑定的是id 然后expand 绑定为一个数组当我们展开的时候记录当前的id 然后看数组里面有没有，当么有的时候就push 进去，当有的时候就删除，但是要判断当前是否传值

@expand-change="expandChange"  // 事件名称
expandChange (row) {
	// 查找当前数组中是否有这个绑定的id
 	const index = this.expands.indexOf(row.guid)
 	// 如果没有就push 进去 如果有的话就进行删除
      if (index < 0) {
        this.expands.push(row.guid)
      } else {
        this.expands.splice(index, 1)
      }
}