1. Wirkung
2. Code
1. FoldEquipmentModel und FoldYears sind die Werte des Gerätemodells und des Jahres im Array-Format.
2. changeactive und active sind Klassennamen
3. Ändern Sie durch das Klickereignis die ausgewählte Schriftfarbe und lösen Sie die Abfragemethode aus
<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>