<el-tree :indent="5" // 相邻级节点间的水平缩进，单位为像素:props="defaultProps" ref="tree" :data="leftList":default-expanded-keys="defaultExpandedArr" // 设置默认展开指定节点 存储默认选中节点对应的key值node-key="id" // 指定以哪个属性为唯一识别的 keyhighlight-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 = falsethis.defaultExpandedArr.some(item => {if (item === data.id) { // 判断当前节点是否存在， 存在不做处理flag = truereturn 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 = thisdata.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博客
)
