uniapp省市区选择器

1.导入插件

先在uniapp插件市场里面引入地址的插件，我用的这个pickerAddress

2.页面里面使用

1.先在script标签里面引入刚才下载好的插件

import pickerAddress from '@/components/common/Address/pickerAddress.vue'

2.注册插件

components: {
    pickerAddress
},

3.data里面定义一个变量，用来存储选择器选择之后显示的数据

data () {
    return {
    	selectaddress: '点击选择',
    }
}

4.HTML里面使用选择地址的插件

pickerAddress @change="changeAddress">{{ selectaddress }}pickerAddress>

5.method里面获取选择的数据（这里面接收的data就是选择的数据）

changeAddress (data) {
      console.log(data)
      this.selectaddress = data.data.join('')	// 这段就是显示我们选择省市区的文字信息
},

3.修改插件里面的代码，用于我们需要的数据

1.template里面的内容

picker @change="bindPickerChange"@columnchange="columnchange":range="array" range-key="name":value="value" mode="multiSelector">
    slot>slot>
  picker>

2.定义选择的地址名称

let selectVal = ['', '', '']

3.data里面的变量

  data () {
    return {
      value: [0, 0, 0],
      array: [],
      index: 0,
      allAddressArray: [],
      selectAddressId: {
        province_id: '',
        city_id: '',
        district_id: '',
      }
    }
  }

4.created 初始化时调用的方法

created () {
    this.initSelect()
  },

5.method方法

methods: {
    // 初始化地址选项
    initSelect () {
      this.getAllAddress()
    },
    // 地址控件改变控件
    columnchange (d) {
			this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
        .updateSourceDate() // 更新源数据
        .updateAddressDate() // 更新结果数据
        .$forceUpdate()  // 触发双向绑定
    },
    getAllAddress () {
    	// 这里就是根据接口返回的数据，保存到allAddressArray 变量里面，然后调用this.updateSourceDate这个方法，一定要修改成自己项目调用接口的方法
      this.$R.get(getAllAddressUrl).then(res => {
        this.allAddressArray = res.data.province
        this.updateSourceDate()
      })
    },
    /**
     * 更新源数据
     * */
    updateSourceDate () {
      this.array = []
      this.array[0] = this.allAddressArray.map(obj => {
        return {
          name: obj.name,
          id: obj.id  // 就是这里新增选择的id，因为后台要的参数一般都是id
        }
      })
      // 这里的this.allAddressArray[this.value[0]].city里面的【city】就是根据自己参数修改对应的字段
      this.array[1] = this.allAddressArray[this.value[0]].city.map(obj => {
        return {
          name: obj.name,
          id: obj.id  // 就是这里新增选择的id，因为后台要的参数一般都是id
        }
      })
      // 这里的this.array[2] = this.allAddressArray[this.value[0]].city[this.value[1]].district里面的【city】和【district】就是根据自己参数修改对应的字段
      this.array[2] = this.allAddressArray[this.value[0]].city[this.value[1]].district.map(obj => {
        return {
          name: obj.name,
          id: obj.id  // 就是这里新增选择的id，因为后台要的参数一般都是id
        }
      })
      return this
    },

    /**
     * 更新索引
     * */
    updateSelectIndex (column, value) {
      let arr = JSON.parse(JSON.stringify(this.value))
      arr[column] = value
      if (column === 0) {
        arr[1] = 0
        arr[2] = 0
      }
      if (column === 1) {
        arr[2] = 0
      }
			this.value = arr
      return this
    },

    /**
     * 更新结果数据
     * */
    updateAddressDate () {
      selectVal[0] = this.array[0][this.value[0]].name
      selectVal[1] = this.array[1][this.value[1]].name
      selectVal[2] = this.array[2][this.value[2]].name
      // 这里存起来省市区的id
      this.selectAddressId.province_id = this.array[0][this.value[0]].id
      this.selectAddressId.city_id = this.array[1][this.value[1]].id
      this.selectAddressId.district_id = this.array[2][this.value[2]].id
      return this
    },

    /**
     * 点击确定
     * */
    bindPickerChange (e) {
      this.$emit('change', {
        // 传递参数的时候把选择的id也传过去
        selcecId: this.selectAddressId,
        index: this.value,
        data: selectVal
      })
      return this
    }

  }