el-tree组件更新数据后保留展开状态

在使用 Element UI 的 el-tree 组件时，若需要在更新数据后保持节点的展开状态，可以通过以下步骤实现：

1. 在数据更新前，收集当前展开的节点 id 列表。
2. 执行数据更新操作。
3. 使用收集的 id 列表来展开对应的节点。

以下是一个简单的示例代码：

<template>
  <div>
    <el-tree
      :data="treeData"
      :default-expanded-keys="defaultExpandedKeys"
      node-key="id"
      ref="tree"
      @node-expand="handleNodeExpand"
      lazy
    >
    </el-tree>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [], // 树形数据
      defaultExpandedKeys: [], // 需要默认展开的节点id数组
    };
  },
  methods: {
    updateTreeData(newData) {
      // 更新数据前保存展开状态
      const expandedNodes = this.$refs.tree.getExpandedNodes();
      this.treeData = newData; // 假设newData是更新后的数据
      this.defaultExpandedKeys = expandedNodes.map(node => node.id);
    },
    handleNodeExpand(data, node, instance) {
      // 如果是首次展开，记录下来
      if (!this.defaultExpandedKeys.includes(data.id)) {
        this.defaultExpandedKeys.push(data.id);
      }
    }
  }
};
</script>

在这个示例中，updateTreeData 方法用于更新树形数据，handleNodeExpand 方法用于在用户首次展开节点时记录下该节点的 id。defaultExpandedKeys 数组用于存储需要默认展开的节点 id。在更新数据后，将 defaultExpandedKeys 设置为 el-tree 组件的 default-expanded-keys 属性，以保持之前展开的状态。