除了自定义以外,下方代码还包含
-
tree自动展开
-
点击节点后节点聚焦
-
节点的click事件
-
节点查询
<template><el-inputplaceholder="请输入要查询的节点"v-model="filterText"clearable></el-input><el-treehighlight-currentclass="filter-tree":data="treeData":props="defaultProps"default-expand-all:filter-node-method="filterNode":expand-on-click-node="false"ref="tree"@node-click="handleNodeClick":render-content="renderContent"></el-tree>
</template>
<script>
import {
export default {data() {return {filterText: "",treeData: [],defaultProps: {children: "children",label: "label",},};},watch: {filterText(val) {this.$refs.tree.filter(val);},},methods: { filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;},handleNodeClick(data) {//点击节点事件},renderContent(h, { node, data }) {let icon;if (data.Usd1 == "Group") {icon = "fa fa-home";} else {icon = "fa fa-sitemap";}return h("span", [h("i", { class: icon, style: "font-size:small" })," ",h("span", data.label),]);},},created() {},
};
</script>
<style>
</style>
