vue使用vant picker实现级联选择

vant picker 级联选择

<van-picker
        title="职位选择"
        show-toolbar
        v-if="showPositionType"
        style="position: absolute; bottom: 0; width: 100%; z-index: 99"
        :columns="columns"
        @cancel="onCancel"
        @confirm="onConfirm"
        @change="onChange"
      />

数据格式

let 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-1",
        children: [
          {
            id: 211,
            text: "测试2-1-1",
          },
          {
            id: 212,
            text: "测试2-1-2",
          },
        ],
      },
      {
        id: 22,
        text: "测试2-2",
        children: [
          {
            id: 221,
            text: "测试2-2-1",
          },
          {
            id: 222,
            text: "测试2-2-2",
          },
          {
            id: 223,
            text: "测试2-2-3",
          },
        ],
      },
      {
        id: 23,
        text: "测试2-3",
      },
    ],
  },
  {
    text: "测试三",
    id: 3,
    children: [
      {
        id: 31,
        text: "测试3-1",
        children: [
          {
            id: 311,
            text: "测试3-1-1",
          },
          {
            id: 312,
            text: "测试3-1-2",
          },
        ],
      },
      {
        id: 32,
        text: "测试3-2",
      },
      {
        id: 33,
        text: "测试3-3",
      },
    ],
  },
];
data() {
    return {
      showPositionType: false,
      columns: [
        {
          values: citys, // 设置的页面初始值
          className: "column1",
        },
        {
          values: citys[0].children,
          className: "column2",
        },
        {
          values: citys[0].children[0].children,
          className: "column3",
        },
      ],
    };

事件监听

   onConfirm(event) {
      console.log(event);
      this.showPositionType = false;
      // const { picker, value, index } = event.detail
      // picker.setColumnValues(1, citys[value[0]])
    },
    onCancel() {
      this.showPositionType = false;
    },
    onChange(picker, values, index) {
      console.log(picker);
      console.log(picker.getColumnIndex(index));
      console.log(values);
      console.log(index);
      let ColumnIndex = picker.getColumnIndex(index);
      if (index == 0) {
        picker.setColumnValues(index + 1, values[0].children || [])
        picker.setColumnValues(index + 2, values[0].children[0].children || [])
      } else if (index == 1) {
        picker.setColumnValues(index + 1, values[0].children[ColumnIndex].children || [])

      }
    },

效果图