uni-app省市二级联动、uni-app省市区三级联动

uni-app实现省市二级联动、省市区三级联动，方法如下：

1、点击下载provinceData。

2、代码如下，如果是省市二级联动，则直接不要注释部分的代码，如果要省市区，就将注释部分的代码放开

<picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" :value="multiIndex" @change="pickerChange" @columnchange="pickerColumnchange">
  <view class="form-item flex flex-middle">
    <view class="label flex flex-middle"><text class="red">*</text>选择省市</view>
    <!-- <view :class="[bankProvince ? '' : 'placeholder', 'input', 'flex-1']">{{bankProvince ? bankProvince+bankCity+bankArea : '请选择省市'}}</view> -->
    <view :class="[bankProvince ? '' : 'placeholder', 'input', 'flex-1']">{{bankProvince ? bankProvince+bankCity : '请选择省市'}}</view>
    <uni-icons type="forward" size="18"></uni-icons>
  </view>
</picker>

import provinceData from '@/common/provinceData'
const bankProvince = ref('')
const bankCity = ref('')
// const bankArea = ref('')
// const oldpProvinceDataList = provinceData
// const newProvinceDataList = reactive([
//   [],[],[]
// ])
// const multiIndex = ref([0, 0, 0])
const oldpProvinceDataList = provinceData
const newProvinceDataList = reactive([
  [],[]
])
const multiIndex = ref([0, 0])
function init() {
  for (let i = 0; i < oldpProvinceDataList.length; i++) {
    newProvinceDataList[0].push(oldpProvinceDataList[i].name);
  }
  for (let i = 0; i < oldpProvinceDataList[0].city.length; i++) {
    newProvinceDataList[1].push(oldpProvinceDataList[0].city[i].name);
  }
  // for (let i = 0; i < oldpProvinceDataList[0].city[0].area.length; i++) {
  //   newProvinceDataList[2].push(oldpProvinceDataList[0].city[0].area[i]);
  // }
}
init()
function pickerChange(e) {
  multiIndex.value = e.detail.value
  bankProvince.value = `${newProvinceDataList[0][multiIndex.value[0]]}`
  bankCity.value = `${newProvinceDataList[1][multiIndex.value[1]]}`
  // bankArea.value = `${newProvinceDataList[2][multiIndex.value[2]]}`
}
function pickerColumnchange(e) {
  // 第一列滑动
  if (e.detail.column === 0) {
    multiIndex.value[0] = e.detail.value
    newProvinceDataList[1] = oldpProvinceDataList[multiIndex.value[0]].city.map((item, index) => {
      return item.name
    })
    if (oldpProvinceDataList[multiIndex.value[0]].city.length === 1) {
      newProvinceDataList[2] = oldpProvinceDataList[multiIndex.value[0]].city[0].area.map((item, index) => {
        return item
      })
    }
    // else {
    //   newProvinceDataList[2] = oldpProvinceDataList[multiIndex.value[0]].city[multiIndex.value[1]].area.map((item, index) => {
    //     return item
    //   })
    // }
    // multiIndex.value.splice(1, 1)
    // multiIndex.value.splice(2, 1)
  }
  // 第二列滑动
  // if (e.detail.column === 1) {
  //   multiIndex.value[1] = e.detail.value
  //   newProvinceDataList[2] = oldpProvinceDataList[multiIndex.value[0]].city[multiIndex.value[1]].area.map((item, index) => {
  //     return item
  //   })
  //   multiIndex.value.splice(2, 1)
  // }
  // 第三列滑动
  // if (e.detail.column === 2) {
  //   multiIndex.value[2] = e.detail.value
  // }
}