uniapp省市区三级联动，uview组件，向上唤起式，内附地址文件

uniapp省市区三级联动，此次组件的使用需要依赖u-view，切记记得导入！！！

话不多说，直接上代码：

html代码：

<template>
    <u-picker @cancel="cancel" :show="show" ref="uPicker" :columns="columns" keyName="name" @confirm="confirm" @change="changeHandler"></u-picker>
</template>

js代码：

<script>
import address from '@/common/address.json';  //文章最后附有下载地址，免费的
export default() { 
    data() {
        return {
            show: false,       //是否显示
			columns: [],       //省份数据显示，三级联动需要三维数组，展示初始数据
			columnData: [],    //市数据
			columnDatas: [],   //区地址
        }
    },
    onLoad() {
    this.initDataPicker()//初始化省份列表
    }
	methods: {
		initDataPicker() {

    //此处的province主要用作数据的初始化，即刚打开就需要进行展示的数据，这个跟第一条省份数据相关，我的第一条是北京市，所以需要columns中的三维数组，第一维度是省份数据数组，第二维度是市数据数组，第三维度是区数据数组
			let province = [];  //初始数据需要展示的省份
			let province1 = [{ name: '市辖区', code: '1101' }]; //因为第一个市北京市，所以就直接添加北京市下辖的直辖市了 也即初始数据需要展示的市，北京市只有一个市辖区
			let province2 = []; //初始数据需要展示的区域数据，也即是 北京市市辖区内的区
			address.map(item => {
				province.push(item);
			});

			address[0].children[0].children.map(item => {
				province2.push(item);
			});

    //省数据 因为要做数据初始化，所以是三维数组 
    // 数据格式 [ [所有的省份数据:{},{}] , [第一个省份下的所有的市:{},{},{}] , [第一个市下面所有的区:{},{},{}] ]
			this.columns.push(province);
			this.columns.push(province1);
			this.columns.push(province2);

    // 市数据数组，筛选address.json文件，将全国所有省下面的市数据放入数组
    // 格式[ [第一个省下面所有市,{},{},{}] , [第二个省下面所有市{},{},{}] , [第三个省下面所有市{},{},{}] ] 注意，以上的第一第二对应着 columns[0] 的数据

			address.map(item => {
				let city = [];
				item.children.map(item1 => {
					city.push(item1);
				});
				this.columnData.push(city);
			});

    //区数据数组
    //数据格式: [ 所有省下面所有市的所有区 [ 第一个省下面所有市的区:[ [第一个省下面第一个市的所有区] , [第一个省下面第二个市的所有区] ,]   ,   [ 第二个省下面所有市的区:[ [第二个省下面第一个市的所有区] , [第二个省下面第二个市的所有区] ,]   ]

			let area = [];
			address.map((item, index) => {
				let area1 = []; //省下面所有市的初始化
				item.children.map(item1 => {
					area = [];  //市下面的区初始化
					item1.children.map(item2 => {
						area.push(item2);
					});
					area1.push(area);// 每循环一个市，添加该市下面的所有区
				});
				this.columnDatas.push(area1);// 每循环一个省，添加该省下面的所有市
			});
		},
	changeHandler(e) { //城市选择时触发
			const {
				columnIndex,//当前选择的列，省 / 市 / 区
				value,  // 当前选择的数组内容
				values, // values为当前变化列的数组内容
				index,  // 当前列的下标值
				indexs, // 当前选择 省 市 区的下表值
				picker = this.$refs.uPicker
			} = e;
			// 当第一列值发生变化时，变化第二列和第三列的值（省份变更，市和区跟着变更）
			if (columnIndex === 0) { // 判断当前变更的是省还是市还是区
				// picker为选择器this实例，变化第二列对应的选项
				picker.setColumnValues(1, this.columnData[index]); //设置市为该省下面的所有市，index是当前省在省份数组的下标，对应市数组中的下表就是 该省下面的所有市 的数据
				picker.setColumnValues(2, this.columnDatas[index][0]); // 设置区域为该省下面第一个市下面的所有区域
			}
			if (columnIndex === 1) {
				// 当第二列发生变化 变化对应的第三列 
				picker.setColumnValues(2, this.columnDatas[indexs[0]][index]); //同上
			}
		},

}
</script>

所做出来的效果就是以下了：

接下来是确认选中和取消选择，可以看具体情况进行修改了：

	confirm(e) {  //点击确定按钮
			console.log(e)
			this.show = false;
		},

    cancel() { //点击取消按钮
			this.show = false;
		},

 address.json文件下载地址：中华人民共和国省市区街道文件配code码免费下载-Javascript文档类资源-CSDN下载

 网盘地址：链接：https://pan.baidu.com/s/1Ti_i0zlrcxUuG7Pb6dXsWQ 
 提取码：6t2j

如果需要vue的省市区三级联动可以参见我的另一篇博客：

vue实现省市区三级联动，附地址文件_F_cy的博客-CSDN博客