解决v-for中遍历多个el-select时下拉选择框同步选择问题解决?
可以使用一个数组来存储每个下拉选择框的值,然后在changeSelect方法中更新相应的值。具体实现如下:
- 在data中定义一个数组thirdSelectValues,用于存储每个下拉选择框的值:
data() { return { thirdSelectValues: [] } }
- 在mounted钩子函数中,初始化thirdSelectValues数组,将每个下拉选择框的值设置为null:
mounted() { this.detailInfo.forEach(item => { item.children.forEach(() => { this.thirdSelectValues.push(null) }) }) }
- 修改el-select的v-model为thirdSelectValues[optionIndex]:
- 在changeSelect方法中,更新thirdSelectValues数组中相应位置的值:
changeSelect(index) { this.$set(this.thirdSelectValues, index, this.thirdSelectValue[index]) }
- 在计算属性中,根据thirdSelectValues数组的值来设置secondSelectValue:
computed: { secondSelectValue() { return this.thirdSelectValues.map(value => { return value !== null ? value : '' }) } }
这样就可以解决v-for中遍历多个el-select时,下拉选择框同步选择的问题了。
原文地址: https://www.cveoy.top/t/topic/bett 著作权归作者所有。请勿转载和采集!