vant 组件表单级联多选

在vant组件库中，可以使用Cascader组件实现级联多选表单。

首先，需要引入Cascader组件：

import { Cascader } from 'vant';

然后，在表单中使用Cascader组件，并设置cascade属性为true，value属性为当前选中的值，options属性为级联选项的数据源：

<van-form>
  <van-field
    v-model="formValue"
    label="级联多选"
    readonly
    clickable
    @click="showCascader"
    placeholder="请选择"
  />
</van-form>

<van-cascader
  v-model="cascaderValue"
  :options="options"
  :cascade="true"
  :value="formValue"
  :title="cascaderTitle"
  @confirm="handleConfirm"
  @cancel="handleCancel"
  ref="cascader"
/>

接下来，需要设置级联选项的数据源options：

data() {
  return {
    formValue: [], // 表单输入的值
    cascaderValue: [], // 级联选择器的值
    cascaderTitle: '', // 级联选择器的标题
    options: [
      {
        text: '选项1',
        value: '1',
        children: [
          {
            text: '选项1-1',
            value: '1-1',
          },
          {
            text: '选项1-2',
            value: '1-2',
          },
        ],
      },
      {
        text: '选项2',
        value: '2',
        children: [
          {
            text: '选项2-1',
            value: '2-1',
          },
          {
            text: '选项2-2',
            value: '2-2',
          },
        ],
      },
    ],
  };
},

最后，需要定义显示和隐藏级联选择器的方法，并处理确认和取消事件：

methods: {
  showCascader() {
    this.$refs.cascader.open();
  },
  handleConfirm(values, selectedOptions) {
    this.formValue = values;
    this.cascaderTitle = selectedOptions.map((option) => option.text).join('/');
  },
  handleCancel() {
    this.formValue = [];
    this.cascaderTitle = '';
  },
},

这样，就可以实现vant组件库中级联多选表单的功能了