解决v-for中遍历多个el-select时下拉选择框同步选择问题
在v-for中遍历多个el-select时,如果需要实现下拉选择框的同步选择,可以使用v-model指令来绑定一个共同的数据属性,然后在每个el-select中使用该属性作为v-model的值。这样,当一个下拉选择框的值改变时,其他下拉选择框的值也会随之改变。
例如,假设需要遍历两个el-select下拉选择框,可以这样实现:
<template>
<div>
<el-select v-model="selected" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-model="selected" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selected: '',
options: [
{ value: 'option1', label: '选项一' },
{ value: 'option2', label: '选项二' },
{ value: 'option3', label: '选项三' }
]
};
}
};
</script>
在上面的代码中,我们使用了一个共同的数据属性selected来绑定两个el-select下拉选择框的v-model指令。这样,当一个下拉选择框的值改变时,另一个下拉选择框的值也会随之改变。
原文地址: https://www.cveoy.top/t/topic/belQ 著作权归作者所有。请勿转载和采集!