官方文档:uni-app官网

1.使用HBuilder导入插件.uni-data-picker 数据驱动的picker选择器 - DCloud 插件市场

 2.导入成功后,在src文件夹下多一个uni_modules的文件夹

3.引入插件

import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js';

 4.在页面中使用

<uni-data-picker
				:localdata="items"
				placeholder="点击选择"
				popup-title="请选择地区"
				v-model="area"
				@change="bindPickerChange"
			>
				<text class="word13" v-if="!area.length">点击选择</text>
				<text class="word13" v-else>{{ area[0] }},{{ area[1] }},{{ area[2] }}</text>
				<text class="icon">&#xe70d;</text>
			</uni-data-picker>
	bindPickerChange(val: any): void {
		let area = val.detail.value
		this.area = [area[0].text,area[1].text,area[2].text];
		this.address.province = area[0].value;
		this.address.city = area[1].value;
		this.address.county = area[2].value;
	}

实现效果

items数据结构如下:

items: any[] = [
		{
			text: '北京市',
			value: '110000',
			children: [
				{
					text: '北京市市辖区',
					value: '110100',
					children: [
						{
							text: '东城区',
							value: '110101'
						},
						{
							text: '西城区',
							value: '110102'
						}
					]
				}
			]
		}
	];

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐