el-select在选项数据源发生变化时,更新当前选中数据的value和label值
时间: 2024-02-10 11:10:26 浏览: 17
当 el-select 的选项数据源发生变化时,el-select 的当前选中数据的 value 和 label 值也需要相应地更新。可以通过监听选项数据源的变化事件,在事件处理函数中更新当前选中数据的 value 和 label 值。
示例代码如下:
```html
<el-select v-model="selected" :options="options" @options-change="handleOptionsChange"></el-select>
```
```javascript
export default {
data() {
return {
selected: '',
options: [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' }
]
}
},
methods: {
handleOptionsChange(newOptions) {
// 获取当前选中数据的 value 和 label 值
const value = this.selected
const label = this.options.find(option => option.value === value)?.label || ''
// 更新选项数据源和当前选中数据的 value 和 label 值
this.options = newOptions
this.selected = value
this.$nextTick(() => {
const newLabel = this.options.find(option => option.value === value)?.label || ''
if (newLabel !== label) {
this.$refs.select.updatePopper()
}
})
}
}
}
```
在 handleOptionsChange 方法中,首先获取当前选中数据的 value 和 label 值。然后,更新选项数据源和当前选中数据的 value 值,同时使用 $nextTick 方法等待 DOM 更新完成后,再次获取当前选中数据的 label 值,并与之前的 label 值比较,如果不同,调用 el-select 的 updatePopper 方法更新弹出框的位置。这样,就可以实现在选项数据源发生变化时,更新当前选中数据的 value 和 label 值。