<template>
<div class="eltree">
<el-input v-model="filterText" placeholder="Filter keyword" />
<el-tree
ref="tree"
:data="treeData"
show-checkbox
node-key="id"
:props="defaultProps"
:check-strictly="true"
@check-change="selectTreeNode"
:filter-node-method="filterNode"
></el-tree>
</div>
</template>
<script>
export default {
name: "eltree",
data() {
return {
treeData: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1",
},
{
id: 10,
label: "三级 1-1-2",
},
],
},
],
},
{
id: 2,
label: "一级 2",
children: [
{
id: 5,
label: "二级 2-1",
},
{
id: 6,
label: "二级 2-2",
},
],
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1",
},
{
id: 8,
label: "二级 3-2",
},
],
},
],
defaultProps: {
children: 'children',
label: 'label'
},
filterText: '',
};
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods: {
/**
* @description: 选择树节点
* @param {Obejct} data 该节点所对应的对象
* @param {Obejct} node 该节点所对应的Node
* @param {Obejct} tree 节点组件本身
*/
selectTreeNode(data, checked, tree) {
if (checked) {
this.$refs.tree.setCheckedNodes([data])
this.filterText = data.label
}
console.log(data, checked, tree)
},
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
}
},
};
</script>