Vant 级联多选组件使用教程 - Cascader 组件实现多级选择

Vant 组件库中的级联多选功能可以通过使用 Cascader 组件来实现。Cascader 组件支持多级联选择，并且可以通过设置 'multiple' 属性来启用多选功能。

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

<template>
  <van-cascader
    v-model='value'
    :options='options'
    :multiple='true'
    @change='handleChange'
  />
</template>

<script>
export default {
  data() {
    return {
      value: [],
      options: [
        {
          text: '选项1',
          value: '1',
          children: [
            {
              text: '选项1-1',
              value: '1-1',
              children: [
                {
                  text: '选项1-1-1',
                  value: '1-1-1'
                },
                {
                  text: '选项1-1-2',
                  value: '1-1-2'
                }
              ]
            },
            {
              text: '选项1-2',
              value: '1-2',
              children: [
                {
                  text: '选项1-2-1',
                  value: '1-2-1'
                },
                {
                  text: '选项1-2-2',
                  value: '1-2-2'
                }
              ]
            }
          ]
        },
        {
          text: '选项2',
          value: '2',
          children: [
            {
              text: '选项2-1',
              value: '2-1'
            },
            {
              text: '选项2-2',
              value: '2-2'
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log('选中的值:', value);
    }
  }
};
</script>

以上代码中，使用了 'van-cascader' 组件来展示级联多选的选项。'v-model' 指令绑定了一个数组 'value'，用于存储用户选择的值。'options' 则是级联选项的数据源，包含多个层级的选项。

设置 ':multiple=true' 启用多选功能。当用户选择或取消选择选项时，会触发 '@change' 事件，并将当前选中的值作为参数传递给 'handleChange' 方法。

你可以根据自己的需求修改 'options' 数据和 'handleChange' 方法来适应你的业务逻辑。