uView 组件库中的u-picker 实现地区的 省-市-区 三级联动

一、json文件的引入

地址我是引入的json文件数据结构大概是这个样子

功能界面如下图

二、代码示例

1、先做一个按钮控制弹窗的弹出

<u-form-item label="户籍所在地" prop="hr" borderBottom required @click="openPoup(1)">
	<u--input 
        disabled 
        disabledColor="#ffffff" 
        v-model="formData.hr" 
        border="none"
		placeholder="请选择" 
    />
	<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>

2、使用u-picker组件

 <!-- 户籍所在地 -->
<u-picker 
    ref="uPicker" 
    :show="areaPickerShow" 
    :columns="addressColumns" 
    :defaultIndex="areaDetault" 
    :closeOnClickOverlay="true" 
    @confirm="nationSel($event, 'area')" 
    @cancel="areaPickerShow=false" 
    @close="areaPickerShow=false" 
    @change="changeHandler" 
/>

3、js变量定义

import areaData from '@/utils/areas.json'    //引入原始数据
  export default {
      data(){
        return {
            areaPickerShow: false,    //控制弹窗显示与隐藏
            areaData: areaData,    //原始数据
			addressColumns: [],  //数据数组
            areaDetault: [],    //数据回显时的默认数据
        }
      }    
    }

4、数据重构/初始化数据

// 户籍所在地数据初始化
      getAreaList(){
         //省的数组
        const provinceData = this.areaData.map(e => {
          return e.name    
        })
        //市的数组
        const cityData = this.areaData.map(e => {
          const arr = []
          arr.push(
            e.children.map(c => {
              return  c.name
            })
          )
          return arr
        })
        //区的数组
        const areaData = this.areaData.map(e => {
          const arr = []
          arr.push(
            e.children.map(c =>
              c.children.map(d => {
                return d.name
              })
            )
          )
          return arr
        })
        const arr = [provinceData, cityData[0][0], areaData[0][0][0]] //组装
        this.addressColumns = arr 
      },

5、数据变更时

// 选中时执行
changeHandler(e) {
  const { columnIndex, index, indexs, picker = this.$refs.uPicker } = e
     if (columnIndex === 0) {
       const children1 = this.areaData[index].children.map(e => {
         return e.name
       })
       picker.setColumnValues(1, children1)
       const children2 = this.areaData[index].children[indexs[1]].children.map(e => {
         return e.name
       })
       picker.setColumnValues(2, children2)}
     if (columnIndex === 1) {
       const children3 = this.areaData[indexs[0]].children[indexs[1]].children.map(e => {
         return e.name
       })
       picker.setColumnValues(2, children3)
     }
  },

6、点击确认

// 选择框确认按钮（有多个选择器时用type进行判断）
	nationSel(event，type) {
      let value = event.value
      this.formData.hr = value.join('/');
      this.areaPickerShow = false
	}

7、数据回调

// 根据回显数据设置默认选中项
      setDefault(){
        // 户籍所在地
        let temp = []
        temp = this.formData.hr.split('/')
        let index, index1, index2 = 0
        let arr, arr1, arr2 = []
        //市区对应每列的第几个
        this.areaData.forEach((item, i) => {
          if (item.name == temp[0]) {
            index = i
            item.children.forEach((val, ind) => {
              if (val.name == temp[1]) {
                index1 = ind
                val.children.forEach((e, n) => {
                  if (e.name == temp[2]) {
                    index2 = n
                  }
                })
              }
            })
          }
        })
        //匹配省市区对应每列的第几个
         arr = this.areaData.map(e => {
          return e.name
        })
        arr1 = this.areaData[index].children.map(e => {
          return e.name
        })
        arr2 = this.areaData[index].children[index1].children.map(e => {
          return e.name
        })
        this.addressColumns = [arr, arr1, arr2]
        this.areaDetault = [index, index1, index2]
      },