uniapp完成省市选择

重要生命:此代码存在部分BUG,推荐使用uniapp组件库pickerAddress组件进行省市区选择

此文章只包含省市的选择,不包含区的选择,如果需要区的选择,可以在此基础上进行扩展

<picker @change="selCity" @columnchange="selMonitor" :value="addressIndex" :range="address" mode="multiSelector">
  <view class="setCon">
    <input type="text" :value="addressNode.province + addressNode.city" disabled="" />
    <icon class="iconfont iconkefu"></icon>
  </view>
</picker>

address.json地址:
https://github.com/KillBOSS-KillMe/referenceDocument/blob/master/json/address.json

// 导入全国省市区集合
import address from '../../static/json/address.json';
export default {
  data() {
    return {
      address: [],
      provinceList: [],
      cityAllList: [],
      addressIndex: [0, 0],
      addressNode: {
        province: "请选择城市",
        city: ""
      }
    };
  },
  onLoad() {
    const that = this
    // 将省市区的数据转换为picker可用的多维数组
    that.getAddressData()
  },
  methods: {
    // 获取地址信息
    selCity(e) {
      const that = this;
      let val = e.target.value
      that.addressNode = {
        province: that.address[0][val[0]],
        city: that.address[1][val[1]]
      }
    },
    // 监听省市区滚动
    selMonitor(e) {
      const that = this
      let column = e.detail.column
      if (column == 0) {
        let index = e.detail.value
        that.address[1] = that.cityAllList[index]
      }
    },
    // 将省市区的数据转换为picker可用的多维数组
    getAddressData() {
      const that = this;
      // 所有城市列表,二维数组
      let cityAllList = [];
      // 省列表
      let provinceList = [];
      // address为省市区的json数据
      for (let key in address) {
        let newDataList = [];
        if (address[key].children) {
          for (let key2 in address[key].children) {
            newDataList.push(address[key].children[key2].name);
          }
        }
        provinceList.push(address[key].name);
        cityAllList.push(newDataList);
      }
      that.provinceList = provinceList;
      that.cityAllList = cityAllList;
      that.address = [provinceList, cityAllList[0]];
    }
  }
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。