博客

先看效果图

1.首先 创建一个address.js文件 用来存放省市区的数据 这里给大家提供一个地址

https://github.com/kaixinf/provinceData/commit/b7b181bd0990796f600a1beeb42c9491e57611ae

注意：数据创建完成之后 要抛出哦

数据新建完成之后 在App.vue里边加上如下代码 一定要加！！

接着就是封装一个组件 创建一个组件文件

2.组件的html部分

<template>
    <view class="input" type="text" placeholder="请选择地址">
        <picker class="pickerList" mode="multiSelector" :range="newProvinceDataList" :value="multiIndex"
            @change="pickerChange" @columnchange="pickerColumnchange">
            <!-- <view>{{provinceDataList[0].name}}--{{provinceDataList[0].city[0].name}}--{{provinceDataList[0].city[0].area[0]}}</view> -->
            <view class="styletext">
                <view class="">{{select}}</view>
                <u-icon color="#C0C4CC" name="arrow-down"></u-icon>
            </view>
        </picker>
    </view>
</template>

3.组件的js部分

export default {
        name: 'areaSelect',
        props: {
            multiIndex_: {
                //eg: multiIndex_="['14','14002','14002002']"
                type: Array,
                default: function() {
                    return [];
                },
            },
        },
        data() {
            return {
                // 地区选择
                oldpProvinceDataList: uni.getStorageSync("provinceData"),
                newProvinceDataList: [
                    [],
                    [],
                    []
                ],
                multiIndex: [0, 0, 0],
                select: '公司地址',
 
                addressData: {
                    name: '',
                    phone: '',
                    address: ''
                },
                binhao: '1'
            }
        },
        mounted() {
            console.log(uni.getStorageSync("provinceData"), 4545644564)
            for (let i = 0; i < this.oldpProvinceDataList.length; i++) {
                // console.log(this.oldpProvinceDataList[i].name);
                this.newProvinceDataList[0].push(this.oldpProvinceDataList[i].name);
            }
            for (let i = 0; i < this.oldpProvinceDataList[0].child.length; i++) {
                // console.log(this.oldpProvinceDataList[1].child[i].child[i],666666)
                this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].child[i].name);
            }
            for (let i = 0; i < this.oldpProvinceDataList[0].child[0].child.length; i++) {
                this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].child[0].child[i].name);
            }
        },
        methods: {
            // 省市区确认事件
            pickerChange(e) {
                this.multiIndex = e.detail.value;
                // 数组内的下标
                // console.log(this.multiIndex);
                // 获取省
                // console.log(this.newProvinceDataList[0][this.multiIndex[0]])
                // 获取市
                // console.log(this.newProvinceDataList[1][this.multiIndex[1]])
                // 获取区
                // console.log(this.newProvinceDataList[2][this.multiIndex[2]])
                this.select =
                    `${this.newProvinceDataList[0][this.multiIndex[0]]}--${this.newProvinceDataList[1][this.multiIndex[1]]}--${this.newProvinceDataList[2][this.multiIndex[2]]}`
            },
            pickerColumnchange(e) {
                // 第几列滑动
                // console.log(e.detail.column);
                // 第几列滑动的下标
                // console.log(e.detail.value)
                // 第一列滑动
                if (e.detail.column === 0) {
                    this.multiIndex[0] = e.detail.value
                    // console.log('第一列滑动');
                    // this.newProvinceDataList[1] = [];
                    this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].child.map((item,
                    index) => {
                        // console.log(item)
                        return item.name
                    })
                    // console.log(this.multiIndex)
                    if (this.oldpProvinceDataList[this.multiIndex[0]].child.length === 1) {
                        this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].child[0].child.map((
                            item,
                            index) => {
                            // console.log(item)
                            return item.name
                        })
                    } else {
                        this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].child[this.multiIndex[
                            1]].child.map((item, index) => {
                            // console.log(item)
                            return item.name
                        })
                    }
                    // 第一列滑动  第二列 和第三列 都变为第一个
                    this.multiIndex.splice(1, 1, 0)
                    this.multiIndex.splice(2, 1, 0)
                }
                // 第二列滑动
                if (e.detail.column === 1) {
                    this.multiIndex[1] = e.detail.value
                    // console.log('第二列滑动');
                    this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].child[this.multiIndex[1]]
                        .child.map((item, index) => {
                            return item.name
                        })
                    // 第二列 滑动 第三列 变成第一个
                    this.multiIndex.splice(2, 1, 0)
                }
                // 第三列滑动
                if (e.detail.column === 2) {
                    this.multiIndex[2] = e.detail.value
                }
            },
        }
    }

4.在需要使用的页面引入组件

5.最后附上我的css部分

.input {
		padding: 20rpx;
		border-bottom: 2rpx solid rgba(#e5e5e5, .4);
 
		.pickerList {
			.styletext {
				display: flex;
				justify-content: space-between;
			}
 
		}
	}

注意：html部分的u-icon是uview框架里的

总结：一开始封装组件 引用的时候发现一直没有区域的数据 以为是传值的问题 但是不是 而是组件里边初始化数据的时候不能用onLoad 改成mounted就ok了