Vue3多选下拉框默认值

Vue3中，如果你想实现一个多选下拉框并且设置其默认值为一组或多选状态，你可以使用v-model指令和数组数据结构。这里是一个简单的例子：

<template>
  <select v-model="selectedItems" multiple>
    <option v-for="(item, index) in options" :key="index" :value="item.value">
      {{ item.label }}
    </option>
  </select>
</template>

<script setup>
import { ref } from 'vue';

// 定义选项数组（这里的options可以包含多个选择项）
const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' }
];

// 创建一个ref来存储已选的值，默认值可以是一个数组
const selectedItems = ref(options.filter(item => initialSelected.includes(item.value)));
let initialSelected = ['option1', 'option2']; // 这里是默认选中的选项

onMounted(() => {
  // 如果需要动态设置默认值，可以在mounted钩子中修改initialSelected
});
</script>

在这个例子中，`selectedItems` 是绑定到多选下拉框的值，初始值是根据 `initialSelected` 中的内容从 `options` 中筛选出来的。如果你希望某些选项默认被选中，只需要在 `initialSelected` 中包含对应的值即可。