Vant picker 多级联动

官网地址：链接

官网文档可能不是很完善，但仔细看文档，方法，类型其实都讲到的。

度娘也没有找到，花了大半天爬坑试错。

搭配弹出层使用

    <van-field readonly clickable placeholder="选择城市" :value="station" @click="showPicker = true" />

    <van-popup v-model="showPicker" position="bottom">
      <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" @change="onChange" />
    </van-popup>

const citys = [  // 我们习惯的格式。 可以后台给你出，如果你打不过的话，你就。。。
  {
    text: "测试一", // 默认识别text标签
    id: 1,
    children: [
      {
        id: 11,
        text: "测试1-1",
        children: [
          {
            id: 111,
            text: "测试1-1-1"
          },
          {
            id: 112,
            text: "测试1-1-2"
          }
        ]
      },
      {
        id: 12,
        text: "测试1-2",
        children: [
          {
            id: 122,
            text: "测试1-2-1"
          },
          {
            id: 122,
            text: "测试1-2-2"
          }
        ]
      },
      {
        id: 13,
        text: "测试1-3"
      }
    ]
  },
  {
    text: "测试二",
    id: 2,
    children: [
      {
        id: 21,
        text: "测试2",
        children: [
          {
            id: 221,
            text: "测试2-2-1"
          },
          {
            id: 222,
            text: "测试2-2-2"
          }
        ]
      },
      {
        id: 22,
        text: "测试2"
      },
      {
        id: 23,
        text: "测试2"
      }
    ]
  },
  {
    text: "测试三",
    id: 3,
    children: [
      {
        id: 31,
        text: "测试3",
        children: [
          {
            id: 311,
            text: "测试3-1-1"
          },
          {
            id: 312,
            text: "测试3-3-2"
          }
        ]
      },
      {
        id: 32,
        text: "测试3"
      },
      {
        id: 33,
        text: "测试3"
      }
    ]
  }
];

  data(){
    return {
      station: "",
      showPicker: false,
      columns: [
        {
          values: citys,  // 设置的页面初始值
          className: "column1"
        },
        {
          values: citys[0].children,
          className: "column2"
        },
        {
          values: citys[0].children[0].children,
          className: "column3"
        }
      ],
	}	
  };
	

    onConfirm(value) {
      const compact = arr => arr.filter(Boolean); // 三级联动 去除没值的，比如只有两级
      const result = compact(value);
      let str = "";  // 呈现页面显示  /xxx/xxx/xxx
      result.forEach(item => {
        str += "/" + item.text;
      });
      this.station = str;
      this.showPicker = false;
      
	  const end = result[result.length - 1]; // 一般都是取最后一个id给后台的
      const id = end.id;
      console.log(id);
    },
    onChange(picker, values, index) { // 实在不行自己打印测试
      if (index == 0) {
        picker.setColumnValues(2, []); // 防止突然选中第一个，第二个是更新的，但第三个联级不更新，我暂时强制清空
      }
      let ColumnIndex = picker.getColumnIndex(index);
      picker.setColumnValues(index + 1, values[index].children || []);;//点当前列更新下一列数据，防止undefined  
      
		// 当然，如果后台数据不给你想要的格式，你就按需请求一次了，比如选中第一个，取id请求接口，更新下一列。毕竟连动内容多的话，页面请求也多。但页面就不流畅，比如第一列第二列初始值。 
	   // 我就是打不过后台。。。
    }

当然，如果有好的建议和修改项欢迎交流