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,就解决了。

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值