使用elementui中<el-select>组件遇到的bug

需求描述：遍历选择下拉框组件，实现点击下拉选择框选中一个或多个下拉框的值来查询数据
页面样式：

目前遇到的问题：
1.进入页面后下拉框默认显示有v-model绑定的值

2.需要实现选择一个下拉框或多个下拉框的值都能查询到数据，目前每选择一个下拉框的值则触发一次查询方法，无法做到选择多个下拉框值去查询
前端代码：

<h2 class="cshuxing">属性查找h2>
                    <div v-for="(item, index) in testList" :key="index">
                      <h1>
                        {{ item.AttName }}
                      h1>
                      <el-select
                        v-model="item.AttCode"
                        value-key="item.AttCode"
                        class="m-2"
                        placeholder="请选择属性"
                        size="small"
                        @change="getProductDetails(index, item)"
                      >
                        <div v-for="val in attvaluearr" :key="val.Attcode">
                          <el-option
                            v-if="item.AttName == val.AttName"
                            :key="val.Attcode"
                            :label="val.AttValue + '(' + val.AttItemCnt + ')'"
                            :value="val.AttValue"
                          />
                        div>
                      el-select>
                    div>

//获取产品详情列表
    async getProductDetails(i, item) {
         this.AttValueSelect = item.AttCode;
        const selectedItem = this.attvaluearr.find((item) => {
          return item.AttValue === this.AttValueSelect;
          // 筛选出匹配数据，是对应数据的整个对象
        });
        this.AttCodeSelect = selectedItem.AttCode;
        console.log("this.AttCodeSelect" + this.AttCodeSelect);
        console.log("this.AttValueSelect" + this.AttValueSelect); 
      const productMap = {
        categoryCode: this.categoryCode,
        [this.AttCodeSelect]: this.AttValueSelect,
      };
      const { data } = await getProductList(productMap, this.pageNum);
      const results = data.records;
      this.total = data.total;
      this.list.push(...results);
      console.log(this.list);
    },

控制台打印的testList数据

控制台打印 this.AttCodeSelect，this.AttValueSelect 的数据

感谢解答！！

• 因为你在el-select里面有一个·@change方法，每次改变都会查询，把它删掉就行
• 最后显示更多按钮上绑定一个查询事件即可

你现在触发的是单个下拉框的值改变函数，item是指当前选择的下拉框数据，所以你每次只能触发一个查询。
要想所有下拉框的条件全部同步执行的话，那你就在getProductDetails函数里不管三七二十一，把所有下拉框选择的数据全取了不就可以了吗？

需要实现选择一个下拉框或多个下拉框的值都能查询到数据，目前每选择一个下拉框的值则触发一次查询方法，无法做到选择多个下拉框值去查询

这一句我没太理解，每操作一个下拉框就会触发change从而查询，你是想等所有想操作的下拉框操作完再发起一次查询吗，而不是每次都触发，如果是这样那应该加个查询按钮。总的来说没太懂遇到的难点是什么

v-model你可以定义一个空变量来绑定它，这样就避免你进入页面时下拉框有默认值， @change时再把选中的变量赋给v-model，这样不就实现啦？

那你需要一个按钮 点击完后 再触发查询 。

首先在data定义变量：

data() {
    return {
      selete1: 0,
      selete2: 0,
      selete3: 0,
      selete4: 0,
      .......//有几个下拉框就定义几个变量
    }
  }

然后 @change="getProductDetails(index, item)"这里的查询函数，
利用this. selete1,this. selete2,this. selete3,this. selete4...等等得到所有已选的数据，然后传递给查询那里就可以了