elementUI 树形控件小试(记录收缩展开)

话不多说上代码

<div class="tree">
        <el-tree
        v-loading="treeloading"
        element-loading-text="拼命加载中~"
        :data="aa"
        :props="defaultProps"
        node-key="value"
        :default-expanded-keys="keysarr"
        @node-expand="nodeexpend"
        @node-collapse="nodecollapse"
        @node-click="handleNodeClick"
        :expand-on-click-node="false"
        >
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>
                    <i :class="data.ico"></i>&nbsp;{{ data.label }}
                </span>              
            </span>
        </el-tree>
    </div>
    <!-- 组件上有的方法就不多说了，可以直接用 -->

项目中的一些需求：需要在添加和删除时保证树形结构不变，即点开是什么样操作完之后还是什么样，无论展开几层，因为添加额删除按钮是在另一个组件中，所以只能通过请求接口去重新渲染，因此有了如下方法

// 这里和上面的方法对应写
nodeexpend(data) {
    this.keysarr.push(data.value) // 添加展开的节点
    
    this.keysarr = [...new Set(this.keysarr)] // 去重
    this.aa = [...this.treelist] // aa为读取的树形数据
    this.$forceUpdate() // 强制刷新，不过好像没什么用
    console.log(this.keysarr, 'kai')
},
nodecollapse (data) {
    if (data.children) { // 判断当前收缩的节点是否有children，有的话接着往下走
        for (let i = 0; i < data.children.length; i++) {
            for (let j = 0; j < this.keysarr.length; j++) {
                if (data.children[i].value == this.keysarr[j]) {
                // 循环之后判断当前节点的子节点是否存在，如果有则删除
                // 这里做下说明，如果仅仅把父节点删掉之后，第一次点击收缩是无效的，而且再次触发这个事件时，被删除的节点依旧会打开，因为还包含子节点，特此，如果有需要的话可以多嵌套几层循环依次删除节点
                    this.keysarr.splice(j, 1) 
                }
            }
        }
    }
    // 删除当前节点
    for (let i = 0; i < this.keysarr.length; i++) {
        if (data.value == this.keysarr[i]) {
            this.keysarr.splice(i, 1)
        }
    }
    this.aa = [...this.treelist]
    this.keysarr = [...this.keysarr]
    this.$forceUpdate()
    console.log(this.keysarr, 'guan')
    // 看到这之后可能有人会问这个treelist, 说明一下这个数据是树的原数据，从接口里拿的存到了vuex中，为什么要用aa接收，是因为强制刷新不管用所以无奈死马当活马医，没成想碰对了，下面的this.keysarr = [...this.keysarr]也是为了刷新，仅仅是因为删除父节点，子节点也没有了，但是还是呈展开状态

其他用到此组件的页面，该怎么操作怎么操作

有好建议的同伴请多多发表言论ヾ(◍°∇°◍)ﾉﾞ

ok，就此结束