Element UI el-tree 保存当前展开节点，再次异步获取树结构数据时默认展开当前保存的节点

之前的一篇文章写了 el-tree 默认展开节点 juejin.cn/post/684490…

项目有新需求，要添加删除树结构的数据，但是每次操作完再请求数据，树又回到了初始状态，于是想到把当前展开的节点保存起来，再请求回来就默认打开了

<el-tree
    ref="tree"
    v-loading="treeLoading"
    :data="studentTree"
    :props="defaultProps"
    :highlight-current="true"
    node-key="id"
    :default-expanded-keys="defaultShowNodes"
    @node-click="handleTree"
    @node-expand="handleNodeExpand"
    @node-collapse="handleNodeCollapse">
</el-tree>

data () {
    return {
        studentTree: [], // 我的树结构数据
        defaultShowNodes: [] // 这里存放要默认展开的节点 id
    }
}

调用 Element el-tree 的事件: @node-expand 节点被展开时触发的事件 和 @node-collapse 节点被关闭时触发的事件

// 树节点展开
handleNodeExpand (data) {
    // 保存当前展开的节点
    let flag = false
    this.defaultShowNodes.some(item => {
        if (item === data.id) { // 判断当前节点是否存在， 存在不做处理
            flag = true
            return true
        }
    })
    if (!flag) { // 不存在则存到数组里
        this.defaultShowNodes.push(data.id)
    }
},
// 树节点关闭
handleNodeCollapse (data) {
    // 删除当前关闭的节点
    this.defaultShowNodes.some((item, i) => {
        if (item === data.id) {
            this.defaultShowNodes.splice(i, 1)
        }
    })
}