el-select有multiple属性根据value回显

在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`数组被初始化为已选中的值，因此在页面加载时，已选中的选项会被自动回显。

可以通过使用 `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` 上。