vue3 vant4 生产多选的级联选择器

要实现这个功能，可以使用 Vant 4.x 中的 Cascader 级联选择器组件。在 Cascader 中，可以通过配置 options 属性来设置级联数据源，然后通过配置 value 属性来获取用户选择的数据。同时，Cascader 还提供了 slot 来自定义显示内容，可以根据自己的需求来进行定制。

对于多选，可以使用 Vant 4.x 中的 Checkbox 复选框组件。在 Cascader 中，可以通过配置 show-checkbox 属性来开启多选模式，然后通过配置 checked-options 属性来获取用户选择的数据。

下面是一个简单的示例代码：

<van-cascader
  :options="options"
  :value="value"
  :show-checkbox="true"
  :checked-options="checkedOptions"
  @change="handleChange"
>
  <template #title="{option}">
    <van-checkbox v-model="option.checked">{{ option.label }}</van-checkbox>
  </template>
</van-cascader>

export default {
  data() {
    return {
      options: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'haidian',
              label: '海淀区',
            },
            {
              value: 'chaoyang',
              label: '朝阳区',
            },
          ],
        },
        {
          value: 'shanghai',
          label: '上海',
          children: [
            {
              value: 'pudong',
              label: '浦东新区',
            },
            {
              value: 'minhang',
              label: '闵行区',
            },
          ],
        },
      ],
      value: [],
      checkedOptions: [],
    };
  },
  methods: {
    handleChange(value, selectedOptions, checkedOptions) {
      this.value = value;
      this.checkedOptions = checkedOptions;
    },
  },
};

在上面的代码中，我们通过配置 options 属性来设置级联数据源，通过配置 value 和 checkedOptions 属性来获取用户选择的数据。同时，我们使用了 slot 来自定义级联选择器的显示内容，将每个选项的 label 和 checkbox 组合在一起。最后，我们监听了 Cascader 的 change 事件，在事件处理函数中更新 value 和 checkedOptions 的值。

希望这个示例代码能够帮助到你。