在 Vue 3 中使用联级选择器多选时，设置默认选中项

在Vue 3中，如果想要实现联级选择器（通常称为树形或多级选择器，如`el-tree-select`组件）并设置默认选中项，你需要结合组件提供的API来操作。这里假设你在使用Element Plus库中的`ElTreeSelect`组件。

首先，确保你已经安装了Element Plus并且在项目中引入了`<el-tree-select>`组件。然后，你可以通过以下步骤设置默认选中项：

1. 定义数据结构：存储你的选项数据，并包含一个标识是否被选中的布尔值字段，例如`selected: Boolean`。

data() {
  return {
    treeData: [
      { id: '1', name: '父节点1', children: [] },
      { id: '2', name: '父节点2', selected: true, children: [
        { id: '2-1', name: '子节点1' },
        { id: '2-2', name: '子节点2', selected: true }
      ]},
      // 其他节点...
    ]
  };
}

2. 初始化组件时传递`treeData`和`props`对象，其中`default-checked-keys`属性用于指定默认选中的项的ID数组。

<template>
  <el-tree-select
    v-model="selectedKeys"
    :data="treeData"
    :props="{ children: 'children', value: 'id', label: 'name' }"
    placeholder="请选择"
    default-checked-keys="[[默认选择项ID]]">
  </el-tree-select>
</template>

<script>
export default {
  data() {
    return {
      selectedKeys: [], // 这里会根据默认选择项ID动态更新
      // 默认选择项ID数组
      defaultCheckedIds: ['2']
    };
  },
  computed: {
    // 使用计算属性处理默认选中状态，因为v-model绑定的是一个数组
    defaultCheckedKeys() {
      return this.defaultCheckedIds.map(id => this.treeData.find(item => item.id === id).id);
    }
  }
};
</script>