15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 uinapp

uniapp省市区选择器

梁鹏翱| 发布于 2021-10-27 12:02:48| 357阅读| 0点赞| 0评论
举报

实现省市区选择器的联动选择

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
    }

  }


0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

梁鹏翱
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部