一、前端页面
<template>
<div>
<el-row >
<!-- 查询工具栏-->
<el-col >
<el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
</el-col>
</el-row>
<el-row>
<el-col >
<el-tree
class="filter-tree"
:data="data"
:props="defaultProps"
highlight-current
:filter-node-method="filterNode"
@node-click="handleNodeClick"
ref="tree">
</el-tree>
</el-col>
</el-row>
</div>
</template>
二、前端js代码区
export default {
name:'systemSetting_menuTreeTable_index',
computed: {
...mapGetters(["token","showButton"])
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
handleNodeClick(item, data) {
console.log('item: ',item,'data: ', data);
this.parentTreeNodeList = [];
this.getParent(data);
console.log(this.parentTreeNodeList);
},
// 根据当前获取的tree节点信息查找父节点
getParent (node) {
if(node.isLeaf == false && node.parent.parent == null){ //
this.parentTreeNodeList.push(node.data);
}else{
if(node.isLeaf == false && node.parent.parent != null ){ //
this.parentTreeNodeList.push(node.data);
this.getParent(node.parent)
}else if(node.isLeaf == true && node.parent.parent != null){
this.parentTreeNodeList.push(node.data);
this.getParent(node.parent)
}
}
},
},
data() {
return {
filterText: '',
parentTreeNodeList:[],
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1',
children: [{
id: 11,
label: '四级 1-1-1'
}, {
id: 12,
label: '四级 1-1-2'
}]
}, {
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'
}
};
}
};
</script>
三、测试数据验证
(1)、前端页面操作
(2)、浏览器控制台打印输出调试