uniApp内置组件picker级联选择懒加载

最新推荐文章于 2024-10-16 23:07:11 发布

bugyellow_emo

最新推荐文章于 2024-10-16 23:07:11 发布

阅读量2.9k

点赞数 1

文章标签：前端 javascript

本文链接：https://blog.csdn.net/bugyellow_emo/article/details/126176681

版权

需要通过省份id去查找城市，picker的数据是二维数组，不需要放到对应的children里面

<!-- 通过 range-key 来指定 Object 中 key 的值作为选择器显示内容,chooseProvincial数据格式为[[],[]] -->
<picker mode="multiSelector" range-key="SHORT_NAME" @columnchange="chooseProvincial" :range="addressList">
	<view style="height: 36px;line-height: 36px;">
        {{city ? city : '请选择工作城市'}}
    </view>
</picker>


// provincialList为省份列表，初始化查询出来放入addressList[0]
async chooseProvincial(e) {
	// 第一列，选择省份
	if (e.detail.column == 0) {
        // 用下标找到省份id去查询城市
		let code = this.provincialList[e.detail.value].PROVINCE_CODE
		let res = await this.$apis.getCity({ PROVINCE_CODE: code })
		this.addressList[1] = res
        // 强制视图更新
		this.$set(this.addressList, 1, res)
	}
	// 第二列，选择城市
	if (e.detail.column == 1) {
        // 选中城市名字
		this.city = this.addressList[1][e.detail.value].SHORT_NAME
        // 存入表的城市id
		this.baseFormData.city = this.addressList[1][e.detail.value].CITY_CODE
	}
}