elementUI之el-select多选拼接成字符串回显
时间: 2023-10-06 18:09:27 浏览: 873
如果使用 `el-select` 的 `multiple` 属性来允许多选,然后想要将选中的值拼接成字符串进行回显,可以按照以下步骤进行操作:
1. 在 `el-select` 上添加 `v-model` 绑定一个数组,用来存储选中的值。
```html
<el-select v-model="selectedValues" multiple>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
```
2. 在组件中定义 `options` 数组和 `selectedValues` 数组。
```js
export default {
data() {
return {
options: [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
{ value: 'option4', label: 'Option 4' }
],
selectedValues: []
};
}
}
```
3. 在组件中定义一个计算属性,用来将选中的值拼接成字符串。可以使用 `Array.prototype.join()` 方法来实现。
```js
export default {
data() {
return {
options: [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
{ value: 'option4', label: 'Option 4' }
],
selectedValues: []
};
},
computed: {
selectedValuesString() {
return this.selectedValues.join(', ');
}
}
}
```
4. 最后,在模板中使用计算属性 `selectedValuesString` 来显示选中的值的字符串形式。
```html
<p>Selected values: {{ selectedValuesString }}</p>
```
这样,每当用户选中或取消选中一个选项时,`selectedValues` 数组会自动更新,而 `selectedValuesString` 计算属性也会相应更新,从而实现了将多选值拼接成字符串进行回显的功能。
阅读全文