bandeng
bandeng
  • 发布:2019-12-13 09:39
  • 更新:2020-01-06 10:38
  • 阅读:191

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

分类:uni-app

详细问题描述

初始设置为

滚动省触发@columnchange,我更新了城市的数据,并重新设置了value,但是并没有变成第一个城市,如图

再次滚动省,触发了额外的事件,如图

2.42版表现正常

出问题版本

2.46,2.45

2019-12-13 09:39 分享
已邀请:
DCloud_UNI_HT

DCloud_UNI_HT

提供一个代码片段,或者demo ,看一下你的实现

  • bandeng (作者)



    /**
    * @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();
    }
    };

    2020-01-06 10:46

  • bandeng (作者)

    这段代码可以吗

    2020-01-06 16:24

要回复问题请先登录注册