elementui选择器多选编辑回显
时间: 2024-10-22 18:07:23 浏览: 21
uni-app 富文本编辑 回显富文本和修改富文本!
Element UI 提供的 Select 组件支持多选模式(multiple),如果你想实现在数据回显时保留用户的选择,可以使用 `v-model` 和 `track-by` 特性。
首先,你需要设置 `v-model` 属性绑定到数据数组,这个数组存储了用户选定的值:
```html
<el-select v-model="selectedValues" multiple placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
```
其中,`selectedValues` 是你要回显的数据数组,`options` 是你的选项列表。
然后,在数据更新时,比如从服务器获取数据并填充到 `options` 数组,你需要确保 `selectedValues` 的值能够映射到新的 `options` 上。这时可以使用 `track-by` 来确保每个已选项目的唯一键被识别:
```javascript
data() {
return {
selectedValues: [], // 初始化为空
options: [] // 后续从服务器获取的数据
};
},
computed: {
filteredOptions() {
return this.options.filter(option => this.selectedValues.includes(option.value));
}
}
```
当 `options` 更新时,`filteredOptions` 只会包含用户之前选择过的项目,从而实现了回显功能。
阅读全文