【uview2.x u-picker省市区三级联动】

uview2.x u-picker省市区三级联动

在这里插入图片描述

<u-picker
  ref="addressPicker"
  :show="showAddressPicker"
  :columns="adsColumnsData"
  @confirm="adsConfirm"
  @cancel="showAddressPicker = false"
  @change="changeAddress"
></u-picker>

// 接口数据结构
在这里插入图片描述

data() {
	return {
		adsData: [],
      	adsColumnsData: [],
      	showAddressPicker: false,
      	form: {
      		address: ''
      	}
	}
}
// 初始化
async init() {
      const { data } = await fetchAreaList()
      this.adsData = data
      // 赋初值
      this.adsColumnsData[0] = this.adsData.map((e) => {
        return e.name
      })
      this.adsColumnsData[1] = this.adsData[0].children.map((e) => {
        return e.name
      })
      this.adsColumnsData[2] = this.adsData[0].children[0].children.map((e) => {
        return e.name
      })
      const picker = this.$refs.addressPicker
      picker.setColumns(this.adsColumnsData)
    },
// 选择改变
changeAddress(e) {
      const {
        columnIndex,
        value,
        values,
        index,
        indexs,
        picker = this.$refs.addressPicker,
      } = e
      // 改变第一项
      if (columnIndex === 0) {
        let items = this.adsData[index].children.map((e) => {
          return e.name
        })
        picker.setColumnValues(1, items)
        items = this.adsData[index].children[0].children.map((e) => {
          return e.name
        })
        picker.setColumnValues(2, items)
      }
      // 改变第二项
      if (columnIndex === 1) {
        let items = this.adsData[indexs[0]].children[index].children.map(
          (e) => {
            return e.name
          }
        )
        picker.setColumnValues(2, items)
      }
    },
// 确认选择
adsConfirm(e) {
      const { indexs, values, value } = e
      this.form.address = value.join('-')
      this.showAddressPicker = false
    },

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值