1. 效果
2. 代码
1. foldEquipmentModel、foldYears 是装备型号和年份的值,是数组格式。
2. changeactive、active 是类名
3.通过点击事件,改变选中的字体颜色以及触发查询方法
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="高级筛选" name="1">
<div class="query " align="left" style="height: 80px">
装备型号:
<div v-for="(item, index) in foldEquipmentModel" :key="item.id" @click="serchItem1(item, index)"
:class="foldActive.activeE === item.id ? 'changeactive' : 'active'">{
{ item.equipmentModel }}</div>
</div>
<div class="query" align="left">
年份:
<div v-for="(item, index) in foldYears" :key="item.id" @click="serchItem5(item, index)"
:class="foldActive.activeY === item.id ? 'changeactive' : 'active'">{
{ item.year }}</div>
</div>
</el-collapse-item>
</el-collapse>
/******************/
<script>
data(){
// 折叠面板
activeNames: null,
//折叠面板装备型号
foldEquipmentModel: [],
//年
foldYears: [
{ id: 1, year: "2021" },
{ id: 2, year: "2022" },
{ id: 3, year: "2023" },
],
}
....
methods:{
//控制打开折叠面板
handleChange(val) {
this.activeNames = val
},
//初始化
init(){
//调接口
var resultdatas = await APIB.GetDictNameById(param);
if (resultdatas.code === 200) {
resultdatas.data.forEach((items) => {
var objs = { id: items.dicDataId, equipmentModel: items.dataName }
_this.foldEquipmentModel.push(objs);
});
_this.getdataList(); //查询表格数据
} else {
Notification.error({
showClose: true,
title: "提示",
message: resultdatas.msg,
offset: 50
});
}
},
serchItem1(val, index) {//获取点击的装备的数据
if (this.foldActive.activeE === null || this.foldActive.activeE !== val.id) {
this.foldActive.activeE = val.id
this.serchData.istype = val.id.toString();
} else {
this.foldActive.activeE = null
this.serchData.istype = ""
}
this.getdataList(this.serchData) //把数据传过去进行筛选,调用筛选方法
},
}
</script>
...
<style>
.changeactive{
color:blue
}
.active{
color:red
}
</style>