可以通过给每个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>
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

原文地址: https://www.cveoy.top/t/topic/berk 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录