组件代码
<template>
<div class="TreeComponentBox">
<ul>
<li>
<div>
<label
v-for="(item,i) in treeArr"
v-bind:class="{curLabel:treeOneValue==item[setUp.value]}"
v-bind:key="item[setUp.value]"
@click="treeArrChange(1,item)"
>{{item[setUp.lable]}}</label>
</div>
</li>
<li v-if="treeTwoArr.length>0">
<div>
<label
v-for="(item,i) in treeTwoArr"
v-bind:class="{curLabel:treeTwoValue==item[setUp.value]}"
v-bind:key="item[setUp.value]"
@click="treeArrChange(2,item)"
>{{item[setUp.lable]}}</label>
</div>
</li>
<li v-if="treeThreeArr.length>0">
<div>
<label
v-for="(item,i) in treeThreeArr"
v-bind:class="{curLabel:treeThreeValue==item[setUp.value]}"
v-bind:key="item[setUp.value]"
@click="treeArrChange(3,item)"
>{{item[setUp.lable]}}</label>
</div>
</li>
<li v-if="treeFourArr.length>0">
<div>
<label
v-for="(item,i) in treeFourArr"
v-bind:class="{curLabel:treeFourValue==item[setUp.value]}"
v-bind:key="item[setUp.value]"
@click="treeArrChange(4,item)"
>{{item[setUp.lable]}}</label>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "TreeComponent",
props: {
//tree数据
treeArr: {
type: Array,
default() {
return [];
},
},
//tree设置
setUp: {
type: Object,
default() {
return {
value: "",
lable: "",
children: [],
};
},
},
},
data() {
return {
curlayer: 1, //筛选条件
treeOneed: "", //一级标签选中label
treeTwoed: "", //二级标签选中label
treeThreeed: "", //三级标签选中label
treeFoured: "", //四级标签选中label
treeOneValue: 0, //一级标签选中value
treeTwoValue: 0, //二级标签选中value
treeThreeValue: 0, //三级标签选中value
treeFourValue: 0, //四级标签选中value
treeTwoArr: [], //二级标签
treeThreeArr: [], //三级标签
treeFourArr: [], //四级标签
};
},
mounted() {
this.gettreeArr(this.treeArr);
},
methods: {
// 再第一级的最前边加上全部按钮
gettreeArr(arr) {
var self = this;
self.treeArr.unshift({
[self.setUp.lable]: "全部",
[self.setUp.value]: "0",
[self.setUp.children]: [],
});
self.treeOneValue = self.treeArr[0][self.setUp.value];
},
// 筛选切换
treeArrChange(level, item) {
//level 当前点击的是第几级
var self = this;
self.curlayer = level;
var inlist = item[self.setUp.children];
var data = {
treeEd: self.treeOneed, //二级标签选中label
treeValue: self.treeOneValue, //二级标签选中value
};
if (level == 1) {
// 给二级赋值
self.treeOneValue = item[self.setUp.value];
self.treeOneed = item[self.setUp.lable];
if (item[self.setUp.lable] == "全部") {
self.treeOneValue = 0;
}
data = {
treeEd: self.treeOneed, //一级标签选中label
treeValue: self.treeOneValue, //一级标签选中value
};
this.$emit("treeChange", data);
self.treeTwoValue = 0;
self.treeThreeValue = 0;
self.treeFourValue = 0;
self.treeTwoArr = [];
self.treeThreeArr = [];
self.treeFourArr = [];
self.treeTwoed = "";
self.treeThreeed = "";
self.treeFoured = "";
if (inlist && inlist.length > 0) {
self.treeTwoArr = this.$util.deepClone(inlist);
self.treeTwoArr.unshift({
[self.setUp.lable]: "全部",
[self.setUp.value]: "0",
[self.setUp.children]: [],
});
self.treeTwoValue = self.treeTwoArr[0][self.setUp.value];
}
} else if (level == 2) {
// 给三级赋值
self.treeTwoValue = item[self.setUp.value];
self.treeTwoed = item[self.setUp.lable];
data = {
treeEd: self.treeTwoed, //二级标签选中label
treeValue: self.treeTwoValue, //二级标签选中value
};
if (item[self.setUp.lable] == "全部") {
self.treeTwoValue = 0;
data = {
treeEd: self.treeOneed, //一级标签选中label
treeValue: self.treeOneValue, //一级标签选中value
};
}
this.$emit("treeChange", data);
self.treeThreeValue = 0;
self.treeFourValue = 0;
self.treeThreeArr = [];
self.treeFourArr = [];
self.treeThreeed = "";
self.treeFoured = "";
if (inlist && inlist.length > 0) {
self.treeThreeArr = this.$util.deepClone(inlist);
self.treeThreeArr.unshift({
[self.setUp.lable]: "全部",
[self.setUp.value]: "0",
[self.setUp.children]: [],
});
self.treeThreeValue = self.treeThreeArr[0][self.setUp.value];
}
} else if (level == 3) {
// 给四级赋值
self.treeThreeValue = item[self.setUp.value];
self.treeThreeed = item[self.setUp.lable];
data = {
treeEd: self.treeThreeed, //三级标签选中label
treeValue: self.treeThreeValue, //三级标签选中value
};
if (item[self.setUp.lable] == "全部") {
self.treeThreeValue = 0;
data = {
treeEd: self.treeTwoed, //二级标签选中label
treeValue: self.treeTwoValue, //二级标签选中value
};
}
this.$emit("treeChange", data);
self.treeFourValue = 0;
self.treeFourArr = [];
self.treeFoured = "";
if (inlist && inlist.length > 0) {
self.treeFourArr = this.$util.deepClone(inlist);
self.treeFourArr.unshift({
[self.setUp.lable]: "全部",
[self.setUp.value]: "0",
[self.setUp.children]: [],
});
self.treeFourValue = self.treeFourArr[0][self.setUp.value];
}
} else if (level == 4) {
self.treeFourValue = item[self.setUp.value];
self.treeFoured = item[self.setUp.lable];
data = {
treeEd: self.treeFoured, //四级标签选中label
treeValue: self.treeFourValue, //四级标签选中value
};
if (item[self.setUp.lable] == "全部") {
self.treeFourValue = 0;
data = {
treeEd: self.treeThreeed, //三级级标签选中label
treeValue: self.treeThreeValue, //三级标签选中value
};
}
this.$emit("treeChange", data);
}
},
},
};
</script>
<style scoped lang="less">
@import "../../css/mixin.less";
.TreeComponentBox {
padding: 0.4rem 0.8rem 0;
box-sizing: border-box;
background-color: #fff;
ul {
width: 100%;
li {
width: 100%;
.clearfix();
div {
width: auto;
display: inline-block;
margin-bottom: 0.6rem;
label {
display: inline-block;
box-sizing: border-box;
line-height: calc(~"1.3rem - 2px");
padding: 0 0.5rem;
margin-right: 0.2rem;
font-size: 0.65rem;
color: #333333;
border-radius: 1.3rem;
border: 1px solid #fff;
> span {
color: #999;
}
}
label.curLabel {
border: 1px solid @color-primary;
background: #e8fff3;
color: @color-primary;
> span {
color: @color-primary;
}
}
}
}
}
}
</style>
