解决v-for中遍历多个el-select时下拉选择框同步选择问题如何j解决?
可以使用v-model和watch来解决这个问题。
首先,在每个el-select中添加一个v-model绑定一个变量。
然后,在组件中添加一个watch监听这个变量的变化,当变量发生改变时,遍历所有el-select,将它们的选中值都赋值为这个变量的值。
示例代码:
<template>
<div>
<el-select v-for="(item, index) in options" :key="index" v-model="selectedOption">
<el-option v-for="(option, optionIndex) in item.options" :key="optionIndex" :label="option.label" :value="option.value"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{
options: [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' },
]
},
{
options: [
{ label: 'Option A', value: 'optionA' },
{ label: 'Option B', value: 'optionB' },
{ label: 'Option C', value: 'optionC' },
]
}
],
selectedOption: ''
}
},
watch: {
selectedOption(newValue) {
this.options.forEach(item => {
item.options.forEach(option => {
if (option.value === newValue) {
option.selected = true;
} else {
option.selected = false;
}
});
});
}
}
}
</script>
在这个例子中,我们遍历了两个el-select,每个el-select包含三个选项。当其中一个el-select的选中值发生改变时,watch监听到了变化,然后遍历所有的选项,将选中值都同步为这个变量的值。
需要注意的是,在这个例子中,我们使用了一个selected属性来追踪每个选项是否被选中。这个属性并不是el-select组件自带的,我们需要自己添加这个属性,并在watch中手动更新它。
原文地址: https://www.cveoy.top/t/topic/bel5 著作权归作者所有。请勿转载和采集!