需求说明:多个下拉选择框,选中其中一个或多个值,封装成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);
},
页面效果
目前选中多个值控制台打印效果为
目前调用该方法,拿到的只是最后点击下拉框选择的值
接口信息为
传递的是一个map集合
其中 “1000” 为 this.AttCodeSelect “IP20” 为 this.AttValueSelect
你的attnamearr是什么样的