uniapp实现省市县三级联动

先说下后端返回的数据
后端省市县返回数据格式如下：
code：编码，为空时返回所有省份
type ： 类型 ，1返回市 2 返回区县，不传就返回省
例如：（下面是省的数据）如果再传（type:1,code:130000）就会返回河北省的数据

<view v-if="visible"
          class="ad_box">
      <view class="title">
        <view class="left"
              @tap="cancel">取消</view>
        <view class="right"
              @tap="exactly">确定</view>
      </view>
      <picker-view style="height:140px"
                   class="picker_box"
                   :indicator-style="indicatorStyle"
                   @change="changePicker">
        <picker-view-column class="picker_col">
          <view v-for="item in provinceData"
                :key="item.region_code">{{item.region_name}}</view>
        </picker-view-column>
        <picker-view-column class="picker_col">
          <view v-for="item in cityData"
                :key="item.region_code">{{item.region_name}}</view>
        </picker-view-column>
        <picker-view-column class="picker_col">
          <view v-for="item in areaData"
                :key="item.region_code">{{item.region_name}}</view>
        </picker-view-column>
      </picker-view>
      <view class="mask"></view> <!-- 遮罩层 -->
    </view>
  </view>
  <script>

import * as loginServer from '@/api/login/login'
import { mapState } from 'vuex'
export default {

  data () {
    return {
      visible: false,
      PCAType: { //临时储存type 与code
        code: '',
        type: 0
      },
      valueArr: [0, 0, 0], //用于判断当前滑动的那一列
      provinceData: [], //省数据
      cityData: [],//市数据
      areaData: [] //区数据
    }
  },
  methods: {
    changePicker (val) {
      console.log(val)
      console.log(val.detail.value)
      let arr = val.detail.value //拿到改变的数组 
      if (this.valueArr[0] !== arr[0]) {
        this.PCAType.code = this.provinceData[arr[0]].region_code
        this.cityGetRegion()
      } else if (this.valueArr[1] !== arr[1]) {
        this.PCAType.code = this.cityData[arr[1]].region_code
        this.areaGetRegion()
      }
      this.valueArr = arr
    },
    enable () { //打开省市县选择器
      this.visible = true
      this.provinceGetRegion()
    },
    cancel () { //取消
      console.log('cancel')
      this.PCAType.type = 0
      this.PCAType.code = ''
      this.valueArr = [0, 0, 0]
      this.visible = false
    },
    exactly () { //确定
      this.PCAType.code = 0
      this.PCAType.type = 0
      this.userAllInfo.province = this.provinceData[this.valueArr[0]].region_name
      this.userAllInfo.city = this.cityData[this.valueArr[1]].region_name
      this.userAllInfo.county = this.areaData[this.valueArr[2]].region_name
      this.valueArr = [0, 0, 0]
      this.visible = false
    },
    provinceGetRegion () { //获取省市县数据
      loginServer.getRegion(this.PCAType)
        .then(res => {
          this.PCAType.code = res[0].region_code
          console.log(res)
          this.provinceData = res
          this.cityGetRegion()
        })
    },
    cityGetRegion () { //获取市数据
      this.PCAType.type = 1
      loginServer.getRegion(this.PCAType)
        .then(res => {
          this.PCAType.code = res[0].region_code
          console.log(res)
          this.cityData = res
          this.areaGetRegion()
        })
    },
    areaGetRegion () { //获取区县数据
      this.PCAType.type = 2
      loginServer.getRegion(this.PCAType)
        .then(res => {
          console.log(res, '===============')
          this.areaData = res
        })
    }
  }
}
</script>