【报Bug】picker 当mode = multiSelector触发@columnchange事件时,发生bug

bandeng (作者)

<template>

<view>

<picker mode="multiSelector" :value="multiIndex" :range="multiArray" range-key="name" @change="bindPickerChange"

@columnchange="bindMultiPickerColumnChange" @cancel="cancelPickerChange">

<slot></slot>

</picker>

</view>

</template>

<script>

/**

• 
  

  @description 三级联动组件
  
  */
  
  export default {
  
  props:{
  
  defaultAddress:{
  
  type:String,
  
  default:'北京,北京市,东城区'
  
  }
  
  },
  
  data() {
  
  return {
  
  multiIndex: [0, 0, 0],
  
  multiArray: [],
  
  backArray:[],
  
  backIndex:[]
  
  };
  
  },
  
  methods: {
  
  async init() {
  
  // 初始化
  
  let init_province_id = 110000;
  
  let init_city_id = 110100;
  
  let arr = this.defaultAddress.split(',')
  
  let province = arr[0];
  
  let city = arr[1];
  
  let district = arr[2];
  
  let ProvinceData = await this.getProvince();
  
  this.multiArray[0] = ProvinceData;

  
  

          ProvinceData.forEach((item, index) => {  
  
              if (item.name == province) {  
  
                  init_province_id = item.province_id;  
  
                  this.$set(this.multiIndex, 0, index);  
  
              }  
  
          });  
  
  
  
          let cityData = await this.getCity(init_province_id);  
  
          this.multiArray[1] = cityData;  
  
  
  
          cityData.forEach((item, index) => {  
  
              if (item.name == city) {  
  
                  init_city_id = item.city_id;  
  
                  this.$set(this.multiIndex, 1, index);  
  
              }  
  
          });  
  
          let districtData = await this.getDistrict(init_city_id);  
  
  
  
          this.multiArray[2] = districtData;  
  
  
  
          districtData.forEach((item, index) => {  
  
              if (item.name == district) {  
  
                  this.$set(this.multiIndex, 2, index);  
  
              }  
  
          });  
  
  
  
          [...this.backIndex] = [...this.multiIndex];   
  
          this.backArray = JSON.parse(JSON.stringify(this.multiArray))  
  
  
  
      },  
  
      async getProvince() {  
  
          // 获取省数据  
  
          let {  
  
              data  
  
          } = await this.$api.getProvince();  
  
          return data;  
  
      },  
  
      async getCity(province) {  
  
          // 获取市级数据  
  
          let {  
  
              data  
  
          } = await this.$api.getCity({  
  
              province  
  
          });  
  
          return data;  
  
      },  
  
      async getDistrict(city) {  
  
          // 获取地区数据  
  
          let {  
  
              data  
  
          } = await this.$api.getDistrict({  
  
              city  
  
          });  
  
          return data;  
  
      },  
  
      async bindMultiPickerColumnChange(e) {  
  
          // 某一列的值改变时触发                 
  
          let column = e.detail.column;  
  
          let idx = e.detail.value;  
  
  
  
          if (column == 0) {  
  
              //省级发生变化  
  
              this.$set(this.multiIndex, 0, idx);  
  
  
  
              let cityData = await this.getCity(this.multiArray[0][idx].province_id);  
  
  
  
              // 修改相关市级数据  
  
              this.$set(this.multiArray, 1, cityData);  
  
              this.$set(this.multiIndex, 1, 0);  
  
  
  
              let districtData = await this.getDistrict(this.multiArray[1][0].city_id);  
  
  
  
              this.$set(this.multiArray, 2, districtData);  
  
              this.$set(this.multiIndex, 2, 0);  
  
          }  
  
  
  
          if (column == 1) {  
  
  
  
              // 市级发生变化  
  
              this.$set(this.multiIndex, 1, idx);  
  
  
  
              let districtData = await this.getDistrict(this.multiArray[1][idx].city_id);  
  
  
  
              this.$set(this.multiArray, 2, districtData);  
  
              this.$set(this.multiIndex, 2, 0);  
  
  
  
          }  
  
  
  
          if (column == 2) {  
  
              // 地区发生变化  
  
              this.$set(this.multiIndex, 2, idx);  
  
          }  
  
  
  
      },  
  
      cancelPickerChange(){  
  
          // 取消选择时触发  
  
  
  
          [...this.multiIndex] = [...this.backIndex];           
  
          this.multiArray = JSON.parse(JSON.stringify(this.backArray))  
  
      },  
  
      bindPickerChange(e) {  
  
          // 确认省市区选择  
  
          this.multiIndex = e.detail.value;  
  
  
  
          [...this.backIndex] = [...this.multiIndex];  
  
          this.backArray = JSON.parse(JSON.stringify(this.multiArray));  
  
  
  
          let province = this.multiArray[0][this.multiIndex[0]].name;  
  
          let city = this.multiArray[1][this.multiIndex[1]].name;  
  
          let district = this.multiArray[2][this.multiIndex[2]];  
  
  
  
          if (district) {  
  
              var newAddress = `${province},${city},${district.name}`;  
  
          } else {  
  
              var newAddress = `${province},${city}`;  
  
          }  
  
  
  
          let data = {  
  
              address:newAddress,  
  
              multiIndex:this.multiIndex,  
  
              multiArray:this.multiArray  
  
          }  
  
          this.$emit('bind',data)  
  
      },  
  
  },  
  
  created() {  
  
      this.init();  
  
  }  

  
  

  };
  
  </script>

  
  

<style></style>

2020-01-06 10:46

bandeng (作者)

这段代码可以吗

2020-01-06 16:24