v-for中遍历多个el-select时下拉选择框同步选择问题如何j解决? div v-for=itemindex in detailInfo key=index label=itemname value=itemid div class=line_xudiv div class=p_title pitemnamep
可以通过给每个el-select绑定一个v-model来解决下拉选择框同步选择的问题。同时,可以在父组件中定义一个数组,用来存储每个el-select的选择值,然后在子组件中通过v-model绑定到这个数组中的对应位置。这样,当一个下拉选择框的值改变时,会触发父组件中的changeSelect方法,可以在该方法中更新其他下拉选择框的值,从而实现同步选择的效果。代码示例如下:
<template>
<div v-for="(item,index) in detailInfo" :key="index">
<div class="line_xu"></div>
<div class="p_title">
<p>{{item.name}}</p>
</div>
<div class="secend_box" v-for="(item2,optionIndex) in item.children" :key="optionIndex">
<div class="secend_name">{{item2.name}}:</div>
<el-select @change="changeSelect(optionIndex)" class="secend_select" clearable placeholder="请选择" style="width:300px;" v-model="selectValues[optionIndex]" :multiple-limit="thirdMultipleLimit">
<el-option v-for="item3 in item2.targetValueList" :key="item3.id" :label="item3.targetNameValue" :value="item3.id">
</el-option>
</el-select>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectValues: [], // 用来存储每个下拉选择框的选择值
};
},
methods: {
// 下拉选择框的值改变时触发
changeSelect(index) {
// 更新其他下拉选择框的值
this.selectValues.forEach((value, i) => {
if (i !== index) {
this.$set(this.selectValues, i, value);
}
});
},
},
};
</script>
原文地址: https://www.cveoy.top/t/topic/berk 著作权归作者所有。请勿转载和采集!