Folding panel el-collapse for advanced filtering

 1. Effect

2. Code

1. foldEquipmentModel and foldYears are the values ​​of equipment model and year in array format.

2. changeactive and active are class names

3. Through the click event, change the selected font color and trigger the query method

<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>