<el-tree
:indent="5" // 相邻级节点间的水平缩进,单位为像素
:props="defaultProps"
ref="tree"
:data="leftList"
:default-expanded-keys="defaultExpandedArr" // 设置默认展开指定节点 存储默认选中节点对应的key值
node-key="id" // 指定以哪个属性为唯一识别的 key
highlight-current // 高亮选中节点
:expand-on-click-node="false"
@node-click="handleNodeClick" // 点击节点事件
@node-expand="handleNodeExpand" // 树节点展开
@node-collapse="handleNodeCollapse"> // 树节点关闭
<span
class="custom-tree-node treeclass"
@click="NodeClick(node.level)"
slot-scope="{ node, data }">
</span>
</el-tree>
data(){
return {
// 树形结构的组成
defaultProps: {
children: "children",
label: "name",
},
defaultExpandedArr: [],
}
}
树节点展开
// 树节点展开
handleNodeExpand(data) {
// 保存当前展开的节点
let flag = false
this.defaultExpandedArr.some(item => {
if (item === data.id) { // 判断当前节点是否存在, 存在不做处理
flag = true
return true
}
})
if (!flag) { // 不存在则存到数组里
this.defaultExpandedArr.push(data.id)
}
},
树节点关闭
// 树节点关闭
handleNodeCollapse(data) {
// 删除当前关闭的节点
this.defaultExpandedArr.some(item, i => {
if (item === data.id) {
this.defaultExpandedArr.splice(i, 1)
}
})
// 这里主要针对多级树状结构,当关闭父节点时,递归删除父节点下的所有子节点
this.removeChildrenIds(data)
},
// 删除树子节点
removeChildrenIds(data) {
const ts = this
data.children.forEach(function (item) {
const index = ts.defaultExpandedArr.indexOf(item.id)
if (index > 0) {
ts.defaultExpandedArr.splice(index, 1)
}
ts.removeChildrenIds(item)
})
},
使树型结构相对应的节点展开
this.$refs["tree"].setCurrentKey(item.id);
this.defaultExpandedArr.push(item.id);
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点_el-tree展开指定节点-CSDN博客