二级联动下拉选择

html部分

<view class="cu-form-group">
    <view class="title">选择地区</view>
    <picker mode="multiSelector" :value="areaIndex" :range="area" range-key="name" @change="change" @columnchange="columnChange">
        <view class="picker">
            {{area[0][areaIndex[0]].name}}，{{area[1][areaIndex[1]].name}}
        </view>
    </picker>
</view>

js部分

import api from '@/common/api'
export default {
  data() {
    return {
      loading: true,
      area: [
        {
          id: 8,
          parent_id: "",
          code: "",
          name: "浙江",
          child: [
            {
              id: 9,
              parent_id: "8",
              code: "",
              name: "温州",
            },
            {
              id: 11,
              parent_id: "8",
              code: "",
              name: "杭州",
            },
            {
              id: 12,
              parent_id: "8",
              code: "",
              name: "宁波",
            },
            {
              id: 13,
              parent_id: "8",
              code: "",
              name: "舟山",
            }
          ]
        },
        {
          id: 18,
          parent_id: "",
          code: "",
          name: "广东",
          child: [
            {
              id: 19,
              parent_id: "18",
              code: "",
              name: "广州",
            },
            {
              id: 20,
              parent_id: "18",
              code: "",
              name: "深圳",
            },
            {
              id: 21,
              parent_id: "18",
              code: "",
              name: "佛山",
            }
          ],
        }
      ],
      areaIndex: [0, 0]
    }
  },
  onLoad() {
    this.area = [this.area, this.area[0].child]
  },
  methods: {
    columnChange(e){
      switch (e.detail.column) {
        case 0:
        this.area = [this.area[0], this.area[0][e.detail.value].child]
      }
    },
    change(e){
      this.areaIndex = e.detail.value
    }
  },
}

转载自 点击进入原帖 https://www.anttoweb.com/kb/uniapp-select/