实现效果
关键:就是不用element-ui的组件,自己来拼接字符串(可能出现的问题我进行了补充说明)
代码块
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="6">
<el-input
v-model="filterText"
placeholder="请输入关键字"
style="margin-bottom: 30px; width: 220px"
/>
<el-tree
ref="tree"
:data="data"
:props="defaultProps"
:filter-node-method="filterNode"
node-key="id"
@node-click="handleNodeClick"
current-node-key="aa"
>
<span class="custom-tree-node" slot-scope="{ node }">
<span>{{ node.label }}</span>
</span>
</el-tree>
</el-col>
<el-col :span="18">
<el-breadcrumb separator="el-icon-arrow-right" style="margin-bottom: 40px">
<el-breadcrumb-item>{{breadLabel}}</el-breadcrumb-item>
</el-breadcrumb>
</el-col>
</el-row>
</div>
</template>
<script>
import brandApi from "@/api/brand";
export default {
data() {
return {
breadList: [], //面包屑数组
breadLabel: "", //面包屑文字
filterText: "",
data: [],
defaultProps: {
children: "children",
label: "name",
},
};
},
created() {
this.getMenus();
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
},
methods: {
//选择节点
handleNodeClick(data) {
//获取面包屑
this.breadList = [];
this.getTreeNode(this.$refs.tree.getNode(data.id));
},
//获取当前树节点和其父级节点
getTreeNode(node) {
if (node && node.label) {
this.breadList.unshift(node.label);
this.getTreeNode(node.parent); //递归
this.breadLabel = this.breadList.join(">");
}
},
//输入搜索
filterNode(value, data) {
if (!value) return true; //判断输入的value是否为空,不为空显示(true)
return data.name.indexOf(value) !== -1; //判断是否存在不存在为-1(false)
},
//tree三级联动
getMenus() {
brandApi.getMenus().then((res) => {
this.data = res.data.data;
});
},
},
};
</script>
核心逻辑
export default {
data() {
return {
breadList:[], //面包屑数组
breadLabel:'' //面包屑文字
}
},
created(){},
mounted(){},
methods:{
//选择节点
handleNodeClick(data) {
//获取面包屑
this.breadList = [];
this.getTreeNode(this.$refs.tree.getNode(data.id));
},
//获取当前树节点和其父级节点
getTreeNode(node){
if (node && node.label) {
this.breadList.unshift(node.label); //在数组头部添加元素
this.getTreeNode(node.parent); //递归
this.breadLabel=this.breadList.join('>'); //面包屑文字及层级链接符号
}
}
}
}
可能出现的问题以及解决办法
console.log(this.$refs.tree.getNode(data.id));//如果这里报错没出现Node
解决办法
//16行
node-key="id"//没加