vant 组件Cascader多选

Vant 组件库中的 Cascader 组件默认是单选的，不支持多选。但是你可以通过一些自定义的方式来实现 Cascader 的多选功能。

一种常见的方式是使用 Vant 的 Popup 组件来自定义 Cascader 的多选功能。你可以在 Popup 中放置一个多选框列表，当用户选择多选框列表中的选项时，通过 JavaScript 的方式来更新 Cascader 的值。

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

<template>
  <div>
    <van-cascader
      :options="options"
      :value="value"
      @change="handleChange"
    />
    <van-popup v-model="showPopup" position="bottom">
      <van-checkbox-group v-model="selectedOptions">
        <van-checkbox
          v-for="option in options"
          :key="option.value"
          :name="option.value"
          :label="option.label"
        />
      </van-checkbox-group>
      <van-button type="primary" @click="handleConfirm">确认</van-button>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: '1',
          label: 'Option 1'
        },
        {
          value: '2',
          label: 'Option 2'
        },
        {
          value: '3',
          label: 'Option 3'
        }
      ],
      value: [],
      selectedOptions: [],
      showPopup: false
    };
  },
  methods: {
    handleChange(value) {
      this.value = value;
    },
    handleConfirm() {
      this.value = this.selectedOptions.map(option => option.name);
      this.showPopup = false;
    }
  }
};
</script>

在上述示例中，我们使用了一个 Popup 组件来展示多选框列表，并在确认按钮点击时更新 Cascader 的值。通过控制 showPopup 的值来显示或隐藏 Popup 组件。

这只是一个简单的示例，你可以根据自己的需求进行更复杂的定制。希望对你有帮助