uniapp 省市区 回填

<template>
	<view>
		<u-button @click="tesx">11</u-button>
	{{aa}}
		<city v-model="aa"></city>
	</view>
</template>

<script>
	import city from './city.vue'
	export default {
		components:{city},
		data() {
			return {
				aa:''
			}
		},
		methods: {
			tesx(){
				this.aa='河北省-石家庄市-市辖区'
			}
			
		}
	}
</script>

<style>

</style>

<template>
  <view>	
   <view @tap="toOpen">
          <text :style="{ color: local.length ? '#333' : '#c0c4cc' }">{{
            local === "" ? "选择省/市/区" : local
          }}</text>
        </view>
    <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>
  </view>
</template>

<script>
import areas from "./china.json"; //引入原始数据
export default {
	props:{
		value:{}
	},
  data() {
    return {
      local: "", //区域
      localCode: "", //这个变量看个人需求使用
      showLocal: false, //是否展示弹出层
      addressColumns: [], //数据数组
      defaultAddress: [], //默认选中 (回填时或者初次显示默认选中)
      addressData: areas, //原始数据 (引入的json文件)
    };
  },
  watch:{
		  
	  value(val){
		  if(val!==this.local){
			  this.local=val
			 
		  }
	  }
  },
  methods: {
	  toOpen(){
		  if( this.local){
			  this.backfill(this.local)
		  }
		  this.showLocal = true
	  },
    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.$emit('input',this.local)
      this.showLocal = false;
    },
    backfill(temp) {
      temp = temp.split("-");
      let index,
        index1,
        index2 = 0;
      let arr,
        arr1,
        arr2 = [];
		console.log(this.addressData);
      //匹配省市区对应每列的第几个
      this.addressData.forEach((item, i) => {
        if (item.name == temp[0]) {
          index = i;
          item.areas.forEach((val, ind) => {
            if (val.name == temp[1]) {
              index1 = ind;
              val.areas.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].areas.map((e) => {
        return { name: e.name, code: e.code };
      });
      arr2 = this.addressData[index].areas[index1].areas.map((e) => {
        return { name: e.name, code: e.code };
      });
      //反推出3列的数组数据
      this.addressColumns = [arr, arr1, arr2];
      // 赋值给 默认初始选中
      this.defaultAddress = [index, index1, index2];
    },
  },

  mounted() {
    //省的数组
    const provinceData = areas.map((e) => {
      return { name: e.name, code: e.code }; //这里可以直接return e.name  这里我是要用到code所以才用对象包起来的 下面的市 区 也一样
    });
    //市的数组
    const cityData = areas.map((e) => {
      const arr = [];
      arr.push(
        e.areas.map((c) => {
          return { name: c.name, code: c.code };
        })
      );
      return arr;
    });
    //区的数组
    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个数组 的第一个市的所有数据赋值 作为初始数据
  },
};
</script>

<style></style>