遍历<el-select>将一个或多个下拉框选择的值,封装成map集合,传递到后端查询数据

需求说明:多个下拉选择框,选中其中一个或多个值,封装成map集合传递至后端,查询数据

<el-aside width="200px">
                    <h2>属性查找</h2>
                    <div v-for="(item, index) in attnamearr" :key="index">
                      <h1>
                        {{ item.AttName }}
                      </h1>
                      <el-select
                        v-model="item.AttCode"
                        value-key="item.AttCode"
                        class="m-2"
                        placeholder="请选择属性"
                        size="small"
                        clearable="true"
                        @change="getProductDetails(index, item)"
                        @clear="getCategorydetailsList"
                      >
                        <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>
                  </el-aside>

方法代码

 //获取产品详情列表
    async getProductDetails(i, item) {
      this.printerSelect[i] = item;
      for (var item of this.printerSelect) {
        this.AttValueSelect = item.AttCode;
        
        const selectedItem = this.attvaluearr.find((item) => {
          return item.AttValue === this.AttValueSelect;
          // 筛选出匹配数据,是对应数据的整个对象
        });
        //console.log(selectedItem.AttCode, "当前选项的AttCode");
        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); 
    },

页面效果

img

目前选中多个值控制台打印效果为

img

目前调用该方法,拿到的只是最后点击下拉框选择的值

img

img

接口信息为

img

传递的是一个map集合

img

其中 “1000” 为 this.AttCodeSelect “IP20” 为 this.AttValueSelect

你的attnamearr是什么样的