实现多层级条件查询
京东多条件查询：
模拟：
使用的vue + element:
<template>
<div class="container containerTop">
<p class="titleP">查询</p>
<div class="box">
<el-row class="boxRow" v-for="(item, index) in filterBox" :key="index">
<el-col class="boxRow1" :span="2">{
{
item.name }}</el-col>
<el-col class="boxRow2" :span="22">
<a
href="#"
v-for="(v, i) in item.items"
:key="i"
@click="clickItem(index, v, i)"
class="text-filter"
>
<span :class="{ isActive: v.active }">{
{
v.text }}</span>
</a></el-col
>
</el-row>
</div>
<el-row class="boxRow" v-show="selectBox.length !== 0">
<el-col class="boxRow1" :span="2">已选中:</el-col>
<el-col class="boxRow2" :span="22">
<el-tag
v-for="item in selectBox"
:key="item.text"
effect="dark"
closable
@close="removeCurrentSelect(item.text)"
>
{
{
item.text }}
</el-tag>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
selectBox: [],
filterBox: [
{
name: "搜索范围:",
items: [
{
value: "2", text: "xxx平台", active: false },
{
value: "3", text: "yyy平台", active: false },
{
value: "4", text: "zzz平台", active: false },
],
},
{
name: "数值范围:",
items: [
{
value: "0", text: "0~3", active: false },
{
value: "1", text: "4~14", active: false },
{
value: "2", text: "15~40", active: false },
{
value: "3", text: "41~65", active: false },
{
value: "4", text: "65~85", active: false },
{
value: "5", text: "85", active: false },
],
},
{
name: "是否限制:",
items: [
{
value: "1", text: "是", active: false },
{
value: "0", text: "否", active: false },
{
value: "2", text: "未知", active: false },
],
},
{
name: "类别:",
items: [
{
value: "2", text: "单个", active: false },
{
value: "3", text: "批量", active: false },
],
},
{
name: "时间:",
items: [
{
value: "3", text: "2022年", active: false },
{
value: "4", text: "2021年", active: false },
{
value: "5", text: "2020年", active: false },
{
value: "6", text: "2019年", active: false },
{
value: "7", text: "2018年", active: false },
],
},
],
};
},
methods: {
clickItem(parentIndex, el, childIndex) {
var item = this.filterBox[parentIndex].items;
item.forEach((v, i) => {
// 点击的
if (i === childIndex) {
// 本身 true
if (v.active) {
this.selectBox = this.selectBox.filter(
(childItem) => childItem.text !== v.text
);
} else {
this.selectBox.unshift(v); // 选中的数组
}
v.active = !v.active; // 选中和反选
} else {
// 其他的
v.active = false; // 取消选中
this.selectBox = this.selectBox.filter(
(childItem) => childItem.text !== v.text
);
}
});
},
removeCurrentSelect(text) {
this.filterBox.forEach((obj) => {
obj.items.forEach((data) => {
if (data.text == text) {
data.active = false;
}
});
});
this.selectBox = this.selectBox.filter((i) => i.text !== text);
},
},
};
</script>
<style lang="less" scoped>
.boxRow {
display: flex;
flex-wrap: wrap;
margin: 6px 0;
height: 30px;
line-height: 30px;
.boxRow1 {
font-size: 18px;
text-align: right;
padding-right: 10px;
}
.boxRow2 {
font-size: 16px;
.el-tag {
height: 30px !important;
line-height: 30px !important;
font-size: 12px;
}
}
}
.el-tag + .el-tag {
margin-left: 10px;
}
.text-filter {
color: #404040;
margin: 3px 10px;
span {
display: inline-block;
text-align: center;
padding: 0 8px;
&:hover {
border-radius: 30px;
color: #ffffff;
animation: myfirst 1s;
-moz-animation: myfirst 1s; /* Firefox */
-webkit-animation: myfirst 1s; /* Safari and Chrome */
-o-animation: myfirst 1s; /* Opera */
animation-fill-mode: forwards;
}
}
}
.isActive {
background-color: #409eff;
border-radius: 40px;
color: #ffffff;
}
@keyframes myfirst {
from {
background: #ffffff;
}
to {
background: #409eff;
}
}
</style>
参考：https://blog.csdn.net/Mrchoi/article/details/90766276