Vue+ElementUI使用el-select multiple 单选或多选需要回显怎么设置
时间: 2024-01-24 07:02:48 浏览: 184
在Vue+ElementUI中使用el-select组件进行单选或多选时,可以通过设置v-model来绑定选中的值,并且根据el-select组件的multiple属性来决定是单选还是多选。
单选时,v-model绑定的是一个普通变量,当用户选择一个选项时,v-model变量会被更新为选中的值。例如:
```
<el-select v-model="selectedItem">
<el-option label="选项1" value="option1"></el-option>
<el-option label="选项2" value="option2"></el-option>
<el-option label="选项3" value="option3"></el-option>
<el-option label="选项4" value="option4"></el-option>
</el-select>
```
其中,`selectedItem`是一个普通变量,用来保存选中的值。当用户选择一个选项时,`selectedItem`变量会自动更新。
多选时,v-model绑定的是一个数组,用来保存选中的值。例如:
```
<el-select v-model="selectedItems" multiple>
<el-option label="选项1" value="option1"></el-option>
<el-option label="选项2" value="option2"></el-option>
<el-option label="选项3" value="option3"></el-option>
<el-option label="选项4" value="option4"></el-option>
</el-select>
```
其中,`selectedItems`是一个数组,用来保存选中的值。当用户选择一个或多个选项时,`selectedItems`数组会自动更新。
要回显已选中的值,只需要将v-model绑定的变量或数组初始化为已选中的值即可。例如:
单选回显:
```
<template>
<el-select v-model="selectedItem">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedItem: "option2", // 已选中的值
options: [
{ label: "选项1", value: "option1" },
{ label: "选项2", value: "option2" },
{ label: "选项3", value: "option3" },
{ label: "选项4", value: "option4" },
],
};
},
};
</script>
```
多选回显:
```
<template>
<el-select v-model="selectedItems" multiple>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedItems: ["option2", "option4"], // 已选中的值
options: [
{ label: "选项1", value: "option1" },
{ label: "选项2", value: "option2" },
{ label: "选项3", value: "option3" },
{ label: "选项4", value: "option4" },
],
};
},
};
</script>
```
在上面的例子中,`selectedItem`变量或`selectedItems`数组被初始化为已选中的值,因此在页面加载时,已选中的选项会被自动回显。
阅读全文