elementUI之el-select多选拼接成字符串回显到el-select上
时间: 2023-10-13 13:13:51 浏览: 187
uni-app 富文本编辑 回显富文本和修改富文本!
可以通过使用 `v-model` 绑定一个数组来实现多选,然后在回显时将数组拼接成字符串。
首先,在 `el-select` 上添加 `multiple` 属性开启多选模式,并将 `v-model` 绑定到一个数组:
```html
<el-select v-model="selectedOptions" multiple>
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
```
在 Vue 的 `data` 中定义 `selectedOptions` 数组:
```js
data() {
return {
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' },
],
selectedOptions: [],
}
},
```
然后,在回显时可以通过 `join` 方法将数组拼接成字符串:
```html
<el-select v-model="selectedOptions" multiple>
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
<div>{{ selectedOptions.join(', ') }}</div>
```
这样,当用户选择多个选项后,会将选项的值存储在 `selectedOptions` 数组中,同时在下方用 `join` 方法将数组拼接成字符串回显到 `el-select` 上。
阅读全文