除了自定义以外,下方代码还包含
-
tree自动展开
-
点击节点后节点聚焦
-
节点的click事件
-
节点查询
<template>
<el-input
placeholder="请输入要查询的节点"
v-model="filterText"
clearable
>
</el-input>
<el-tree
highlight-current
class="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>