uni.app小程序实现三级联动

最新推荐文章于 2024-09-20 19:53:42 发布

原创最新推荐文章于 2024-09-20 19:53:42 发布 · 460 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文档展示了如何在Vue中使用pca-picker-cc组件创建三级联动的地址选择器，并通过data和methods设置默认值及处理点击事件。通过getAddressResultObj方法获取并更新province、city和district的值。

1.引入三级联动的文件pca-picker-cc

<view class="d-flex">
			<view> 所在地区：</view>
	<pca-picker-cc @getAddressResultObj="getAddressResultObj" 
                   :addressList.sync="addressList">
	   <view class="uni-input">
			{{addressList.join(' ')}}
	   </view>
	</pca-picker-cc>
</view>

输入默认值

data() {
			return {
				addressList: ["安徽省", "合肥市", "瑶海区"],
                 form: {
					province: '',
					city: '',
					district: '',
				   },
                }
       }

输入的点击事件

methodes:{
	getAddressResultObj(e) {
				console.log(e);
				this.form.province = e.province.name;
				this.form.city = e.city.name;
				this.form.district = e.county.name
			}
      }