vant4 生成多选级联选择器

您可以使用Vant4中的`Cascader`组件来生成多选级联选择器。这个组件允许您在一个单独的组件中展示多个级联选择器，每个级联选择器之间可以进行联动。以下是一个简单的示例代码：

<template>
  <van-cascader
    :options="options"
    v-model="value"
    :active-item-class="activeItemClass"
    :item-height="itemHeight"
    :height="height"
    :visible-item-count="visibleItemCount"
    :placeholder="placeholder"
    :toolbar-position="toolbarPosition"
    :close-on-click-outside="closeOnClickOutside"
    :close-on-click-overlay="closeOnClickOverlay"
    :lazy-render="lazyRender"
    :expand-trigger="expandTrigger"
    :cascade="cascade"
    :border="border"
    :readonly="readonly"
    :disabled="disabled"
    :title="title"
    :columns-top="columnsTop"
    :columns-bottom="columnsBottom"
    :option-render="optionRender"
    :option-disabled="optionDisabled"
    :format="format"
    :before-confirm="beforeConfirm"
    :confirm-button-text="confirmButtonText"
    :cancel-button-text="cancelButtonText"
    @confirm="onConfirm"
    @cancel="onCancel"
    @change="onChange"
  />
</template>

<script>
  export default {
    data() {
      return {
        options: [
          {
            text: 'Fruit',
            value: 'fruit',
            children: [
              {
                text: 'Apple',
                value: 'apple'
              },
              {
                text: 'Banana',
                value: 'banana'
              },
              {
                text: 'Orange',
                value: 'orange'
              }
            ]
          },
          {
            text: 'Drink',
            value: 'drink',
            children: [
              {
                text: 'Water',
                value: 'water'
              },
              {
                text: 'Tea',
                value: 'tea'
              },
              {
                text: 'Coffee',
                value: 'coffee'
              }
            ]
          }
        ],
        value: [],
        activeItemClass: '',
        itemHeight: 44,
        height: 220,
        visibleItemCount: 5,
        placeholder: 'Please select',
        toolbarPosition: 'bottom',
        closeOnClickOutside: true,
        closeOnClickOverlay: true,
        lazyRender: true,
        expandTrigger: 'click',
        cascade: true,
        border: true,
        readonly: false,
        disabled: false,
        title: '',
        columnsTop: [],
        columnsBottom: [],
        optionRender: '',
        optionDisabled: '',
        format: '',
        beforeConfirm: '',
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel'
      };
    },
    methods: {
      onConfirm(value) {
        console.log(value);
      },
      onCancel() {
        console.log('cancel');
      },
      onChange(value) {
        console.log(value);
      }
    }
  };
</script>

在这个示例中，`options`是一个包含所有级联选择器选项的数组，`value`是一个数组，其中包含用户选择的所有选项的值。您可以使用`@change`事件来监听用户选择的选项，`onConfirm()`方法会在用户点击确认按钮时触发，`onCancel()`方法会在用户取消选择时触发。