el-select 多选返回字符串用,隔开,而不是现在的数据,提交和回显都说一下
时间: 2024-02-24 07:54:33 浏览: 37
要让 el-select 多选返回字符串,可以使用 v-model 绑定一个数组,然后在提交时将数组转换为字符串。具体的代码如下:
```html
<template>
<div>
<el-select
v-model="selectedValues"
multiple
filterable
placeholder="请选择"
@change="handleSelectChange"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<el-button type="primary" @click="handleSubmit">提交</el-button>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ label: "选项1", value: "option1" },
{ label: "选项2", value: "option2" },
{ label: "选项3", value: "option3" },
{ label: "选项4", value: "option4" }
],
selectedValues: []
};
},
methods: {
handleSelectChange() {
// do something when selected values change
},
handleSubmit() {
const selectedString = this.selectedValues.join(",");
console.log("selected string: ", selectedString);
}
}
};
</script>
```
在上述代码中,`selectedValues` 是一个数组,用来存储用户选择的值。在提交时,我们将数组转换为字符串,并输出到控制台上。如果需要在回显时将字符串转换为数组,可以使用 `split` 方法将字符串分割成数组。