<u-form-item label="地區(qū)" :border-bottom="false">
    <u-cell :border="false">
       <view slot="right-icon" @tap="showLocal = true">
         <text :style="{ color: local.length ? '#333' : '#c0c4cc' }">{{ local === '' ? '選擇省/市/區(qū)' : local }}</text>
       </view>
     </u-cell>
 </u-form-item>

 <u-picker
      @cancel="showLocal = false"
      @close="showLocal = false"
      :show="showLocal"
      :columns="addressColumns"
      @confirm="localConfirm"
      title="請選擇所在地"
      keyName="name"
      itemHeight="80"
      closeOnClickOverlay
      ref="uPicker"
      @change="changeHandler"
      :defaultIndex="defaultAddress"
      immediateChange
    ></u-picker>

import areas from '@/utils/areas.json'//引入原始數據
  export default {
  data(){
	return {
			 local: '', //區(qū)域
			localCode: '', //這個變量看個人需求使用
	        showLocal: false,   //是否展示彈出層
	        addressColumns: [], //數據數組
	        defaultAddress: [],  //默認選中 (回填時或者初次顯示默認選中)
	        addressData: areas,  //原始數據 (引入的json文件)
		}
	}    
}

   onShow() {
    //省的數組
      const provinceData = areas.map(e => {
        return { name: e.name, code: e.code }//這里可以直接return e.name  這里我是要用到code所以才用對象包起來的 下面的市 區(qū) 也一樣
      })
//市的數組
      const cityData = areas.map(e => {
        const arr = []
        arr.push(
          e.areas.map(c => {
            return { name: c.name, code: c.code }
             
          })
        )
        return arr
      })
//區(qū)的數組
      const areaData = areas.map(e => {
        const arr = []
        arr.push(
          e.areas.map(c =>
            c.areas.map(d => {
              return { name: d.name, code: d.code }
            })
          )
        )
        return arr
      })
      const arr = [provinceData, cityData[0][0], areaData[0][0][0]]
      this.addressColumns = arr    //將得到的3個數組 的第一個市的所有數據賦值 作為初始數據
    
    },

 changeHandler(e) {
//分別表示選中的列 , 該列的第幾個,選中的3列的第幾個的數組,組件本身
        const { columnIndex, index, indexs, picker = this.$refs.uPicker } = e
       //如果改變的是第一列
        if (columnIndex === 0) {
          const children1 = this.addressData[index].areas.map(e => {
            return { name: e.name, code: e.code }
          })
          picker.setColumnValues(1, children1)
//更換 第二列數據
          const children2 = this.addressData[index].areas[indexs[1]].areas.map(e => {
            return { name: e.name, code: e.code }
          })
          picker.setColumnValues(2, children2)
//更換 第三列數據
        }
        if (columnIndex === 1) {
//如果改變的是第二列
          const children3 = this.addressData[indexs[0]].areas[indexs[1]].areas.map(e => {
            return { name: e.name, code: e.code }
          })
          picker.setColumnValues(2, children3)
//更換 第三列數據
        }
      },

    localConfirm(e) {
//顯而易見 不多贅述
        this.local = `${e.value[0].name}-${e.value[1].name}-${e.value[2].name}`
        this.localCode = `${e.value[0].code}-${e.value[1].code}-${e.value[2].code}`
        this.showLocal = false

      },

//已經知道了 this.local ='省-市-區(qū)'初始彈窗時默認選中改值

     backfill(temp) {
        temp = item.area.split('-')
        let index,
          index1,
          index2 = 0
        let arr,
          arr1,
          arr2 = []
//匹配省市區(qū)對應每列的第幾個
        this.addressData.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.addressData.map(e => {
          return { name: e.name, code: e.code }
        })
        arr1 = this.addressData[index].children.map(e => {
          return { name: e.name, code: e.code }
        })
        arr2 = this.addressData[index].children[index1].children.map(e => {
          return { name: e.name, code: e.code }
        })
//反推出3列的數組數據
        this.addressColumns = [arr, arr1, arr2]
// 賦值給 默認初始選中 
        this.defaultAddress = [index, index1, index2]
      }