可以使用一个数组来存储每个下拉选择框的值,然后在changeSelect方法中更新相应的值。具体实现如下:

  1. 在data中定义一个数组thirdSelectValues,用于存储每个下拉选择框的值:

data() { return { thirdSelectValues: [] } }

  1. 在mounted钩子函数中,初始化thirdSelectValues数组,将每个下拉选择框的值设置为null:

mounted() { this.detailInfo.forEach(item => { item.children.forEach(() => { this.thirdSelectValues.push(null) }) }) }

  1. 修改el-select的v-model为thirdSelectValues[optionIndex]:
  1. 在changeSelect方法中,更新thirdSelectValues数组中相应位置的值:

changeSelect(index) { this.$set(this.thirdSelectValues, index, this.thirdSelectValue[index]) }

  1. 在计算属性中,根据thirdSelectValues数组的值来设置secondSelectValue:

computed: { secondSelectValue() { return this.thirdSelectValues.map(value => { return value !== null ? value : '' }) } }

这样就可以解决v-for中遍历多个el-select时,下拉选择框同步选择的问题了。

解决v-for中遍历多个el-select时下拉选择框同步选择问题解决?

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

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