element-UI中el-tree在添加或删除子节点后,也就是每次刷新树后就会关闭(收上去),体验感不友好!
解决办法:
利用node-expand和node-collapse监听树展开和关闭的状态;
把展开的节点id push给defaultExpandKeys,保持展开状态;
再次点击此节点时-再从defaultExpandKeys数组内对应的id(节点)扔出去;
//@node-click="nodeClick" -----点击事件;
//@node-expand="unfoldTreeState" -----节点被展开时触发的事件;
//@node-collapse="foldTreeState" -----节点被关闭时触发的事件;
// :default-expanded-keys="defaultExpandKeys"-----默认展开节点;
// :expand-on-click-node="false" ----- false时则只有点箭头图标的时候才会展开或者收缩节点。
实现代码
<template>
<div>
//1.tree的样式
<el-tree ref="topicTree"
:data="treeData"
node-key="id"
@node-click="nodeClick"
@node-expand="unfoldTreeState"
@node-collapse="foldTreeState"
:default-expanded-keys="defaultExpandKeys"
:expand-on-click-node="false"
:highlight-current="true"
}">
......
</el-tree></div>
</template>
export default {
//2.data内定义默认展开的数组
data () {
return {
// defaultExpandKeys 默认展开的数组
defaultExpandKeys: []
}
},
methods: {
//3.打开状态和关闭状态事件
// 节点打开状态
unfoldTreeState (data, node, ele) {
// this.$set(node, 'expanded', true)
// console.log(data.id, '打开状态**/**/**/**/')
//如果默认展开的数组内的id等于-1(没有),就把打开的这个节点的id,
push给defaultExpandKeys;
if (this.defaultExpandKeys.indexOf(data.id) === -1) {
this.defaultExpandKeys.push(data.id)
//console.log(this.defaultExpandKeys, '打开时候')
}
},
// 节点关闭状态
foldTreeState (data, node, ele) {
// this.$set(node, 'expanded', false)
// console.log(data.id, node, '关闭状态**/**/**/**/')
//节点关闭时,把defaultExpandKeys内对应的id扔出去
if (this.defaultExpandKeys.indexOf(data.id) !== -1) {
const index = this.defaultExpandKeys.findIndex(item => {
return item === data.id
})
this.defaultExpandKeys.splice(index, 1)
// console.log(this.defaultExpandKeys.splice(index, 1), '关闭时候')
}
}
},
}
截图凑合看吧(我的tree没有多选框,新增和删除也没代码体现-大佬自行补充吧) ,更多样式可以参考element-ui
如有更好的实现方式,欢迎大佬指点~~