优化用户体验："解决 el-tree 刷新自动展开节点"

在使用 Element UI 的 Tree 组件时，有时候会遇到一个问题：当刷新el-tree后，已经展开的节点会自动关闭，而我们期望这些节点能够保持展开状态。这是我们没解决之前的效果

这个问题的原因是 Element UI 的 Tree 组件并没有提供自动展开已经展开的节点的功能。因此，我们需要自己编写代码来实现这个功能。

存储展开节点的 ID

我们需要在每次展开或者关闭节点的时候，记录下所有已经展开的节点的 ID，可以通过default-expanded-keys 属性来实现。在这里defaultExpandIds是记录展开的节点的数组，需要在data中初始化。

<el-tree
    :filter-node-method="filterNode"
    ref="sourceTree"
    node-key="id"
    :data="sqlData"
    :expand-on-click-node="false"
    @node-expand="(data)=>handleNodeToggle(data,true)" 
    @node-collapse="(data)=>handleNodeToggle(data,false)" 
    :default-expanded-keys="defaultExpandIds"
>

data() {
    return {
        defaultExpandIds:[]//展开节点数组
    }
}

我们可以在 Tree 组件初始化的时候，将已经展开的节点的 ID 设置为 default-expanded-keys 属性的值。这样，当tree刷新后，el-tree会根据已经记录好的id进行展开。

刷新树

在这个应用程序中，我们需要获取树形结构的数据并将其呈现在UI上。为了实现这一点，每次刷新UI，我们只需要重新获取树形数据即可。如果没有设置默认展开的值，重新获取数据后，所有树节点的状态都将被重置为关闭状态，因此需要手动展开节点来查看其内容，.

//获取树数据
getWorkTree() {
    let vm = this;
    return new Promise((resolve) => {
        ...
        vm.sqlData = res.data;
    });
},

展开和关闭触发动作

函数用于处理树形结构中节点的展开和关闭操作，并维护一个默认展开节点列表。当传入参数isExpanded为true时，表示要展开节点。首先判断该节点是否已经被展开过，如果没有则将其添加到默认展开节点列表中（即this.defaultExpandIds数组中）。当传入参数isExpanded为false时，表示要关闭节点。首先在默认展开节点列表中查找该节点的索引，如果存在则将其从默认展开节点列表中删除。

// 树节点展开/关闭
handleNodeToggle(data, isExpanded) {
  if (isExpanded) {
    // 展开节点
    if (!this.defaultExpandIds.includes(data.id)) {
      // 如果节点未被展开过，将其添加到默认展开节点列表中
      this.defaultExpandIds.push(data.id);
    }
  } else {
    // 关闭节点
    const index = this.defaultExpandIds.indexOf(data.id);
    if (index > -1) {
      // 如果节点存在于默认展开节点列表中，则将其从中删除
      this.defaultExpandIds.splice(index, 1);
    }
  }
  // 递归删除所有子节点
  this.removeChildrenIds(data);
},

递归删除所有子节点的操作是用于关闭父节点的同时对父节点下面的所有子节点进行光比

最终效果

本文正在参加「金石计划」