element-ui select组件中复选时以字符串形式显示
时间: 2023-11-24 20:11:10 浏览: 149
element-ui 远程搜索组件el-select在项目中组件化的实现代码
在 element-ui 的 select 组件中,如果设置了 multiple 属性,那么就可以进行多选,但是默认情况下选择的值是以数组形式返回的。如果需要以字符串形式显示,可以使用 Vue.js 中的计算属性来处理。
首先,需要将 select 组件的 v-model 绑定到一个数组类型的数据上,例如:
```
<el-select v-model="selectedOptions" multiple>
<el-option label="Option 1" value="option1"></el-option>
<el-option label="Option 2" value="option2"></el-option>
<el-option label="Option 3" value="option3"></el-option>
</el-select>
```
然后,在 Vue.js 中定义一个计算属性,将选中的值转换成字符串形式。例如:
```
computed: {
selectedOptionsString() {
return this.selectedOptions.join(', ');
}
}
```
最后,在页面中使用这个计算属性来显示选中的值。例如:
```
<p>Selected options: {{ selectedOptionsString }}</p>
```
这样就可以实现在 element-ui select 组件中多选时以字符串形式显示选中的值了。
阅读全文