Vue3+Element Plus下拉菜单多选后,下拉菜单里能够回显选择的数据
时间: 2024-02-15 20:12:11 浏览: 111
基于layui的下拉列表的数据回显方法
5星 · 资源好评率100%
可以通过 `el-select` 组件的 `v-model` 绑定一个数组,将选中的数据保存在数组中,然后通过 `el-option` 组件的 `v-bind:selected` 绑定一个计算属性,判断该选项是否被选中,从而在下拉菜单中显示选中的数据。
示例代码如下:
```
<template>
<el-select v-model="selectedOptions" multiple>
<el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" :selected="isSelected(option)">
</el-option>
</el-select>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const selectedOptions = ref([]);
const options = [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' },
{ value: 'option4', label: '选项4' },
];
const isSelected = (option) => {
return selectedOptions.value.includes(option.value);
};
return {
selectedOptions,
options,
isSelected,
};
},
};
</script>
```
在上面的例子中,通过 `ref` 创建了一个名为 `selectedOptions` 的响应式变量,用于保存选中的数据。通过 `computed` 创建了一个名为 `isSelected` 的计算属性,用于判断选项是否被选中。在 `el-option` 组件中,通过 `v-bind:selected` 绑定了该计算属性,从而在下拉菜单中显示选中的数据。
阅读全文