Vant 级联多选组件使用指南 - 实现多级联动选择 - 常规

在 Vant 组件库中，可以使用 'van-cascader' 组件来实现级联多选的功能。该组件可以实现多级联动选择，用户可以通过选择一级选项后，自动加载下一级选项，依次类推。

使用 'van-cascader' 组件需要引入对应的 CSS 样式文件和 JavaScript 文件，然后在代码中使用以下方式使用组件：

在 template 中使用 'van-cascader' 标签定义级联多选组件的位置和样式。

<van-cascader v-model="selectedOptions" :options="options" :field-names="fieldNames" @change="handleChange" />

'v-model' 指定了级联多选的绑定值，'options' 指定了级联选项的数据源，'field-names' 指定了级联选项的字段名，'@change' 监听级联选项的变化。

在 script 中定义相关的数据和方法。

export default {
  data() {
    return {
      selectedOptions: [], // 绑定值
      options: [], // 数据源
      fieldNames: { // 字段名
        label: 'name',
        value: 'id',
        children: 'children'
      }
    }
  },
  methods: {
    handleChange(value) {
      console.log(value); // 打印级联选择的值
    }
  }
}

在 data 中定义了绑定值 'selectedOptions'、数据源 'options' 和字段名 'fieldNames'。在 methods 中定义了处理级联选择变化的方法 'handleChange'。

在 style 中定义组件的样式。

<style scoped>
  /* 样式定义 */
</style>

使用 'scoped' 属性可以将样式限定在当前组件内部。

以上是使用 Vant 组件库中的 'van-cascader' 组件实现级联多选的基本步骤。根据具体需求，可以调整组件的属性和样式来实现不同的效果。