[JavaScript知识库]el-tree重新渲染数据保存上次展开操作记录

首先是设置默认展开数据，element官网上给我们提供了属性default-expand-keys这个属性，每次数据变化时，给这个属性绑定值（expandKey）就好。

我这里初始化默认展开第一级

watch：{
    treeData：{
        handler：function () {
            if(this.treeData.length > 0) {
                this.expandKey = [this.treeData[0].id]
            }
        },
        deep: true
    }
}

其次我们的需求是每次数据更新，原来操作展开或关闭的节点依然存在，我就想当然把每次展开的节点存入expandKey，收起节点将该节点从expand中去除。

element给我们提供了：

nodeExpand (data) {
    if(!this.expandKey.find(_key => _key === data.id)) {
        this.expandKey.push(data.id)
    }
}
nodeCollapse (data) {
    this.expandKey = this.expandKey.filter(_key !== data.id)
}

发现每次数据更新默认展开根节点，于是急急忙忙将watch里面的方法给改了改

watch：{
    treeData：{
        handler：function () {
            if(this.treeData.length > 0) {
                this.expandKey = [this.treeData[0].id, ...this.expandKey]
            }
        },
        deep: true
    }
}

本以为大功告成谁知道只能一级级收起，不能跨级收起了，如果跨级收起（其子节点全部展开了）

心想如果有一个方法或者属性在我刷新数据前我可以获取当前展开的节点的id好了，于是去找，想找的没找到，但是找到了惊喜

?该属性设置成false，就解决了。