话不多说上代码
<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> {{ 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,就此结束