uni-data-picker是一个级联选择控件， 支持单列、和多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。

1.uni-data-picker实现省市级联效果

<template>
    <view class="container">
        <uni-card is-full :is-shadow="false">
            <text class="uni-h6">uni-data-picker实现省市级联案例</text>
        </uni-card>
        <uni-section title="调用远程接口" type="line" padding style="height: calc(100vh - 100px);">

            <uni-data-picker placeholder="请选择地区" :clear-icon="false" popup-title="请选择所在地区" :localdata="provinceList" v-model="currentAreaId"
                 @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
                @popupclosed="onpopupclosed">
                <!--
                <text class="word13" v-if="!area.length">点击选择</text>
                <text class="word13" v-if="area.length===1">{{ area[0] }}</text>
                <text class="word13" v-if="area.length===2">{{ area[0] }}/{{ area[1] }}</text>
                <text class="word13" v-if="area.length===3">{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
                <uni-icons type="forward" size="18"></uni-icons>
                -->
            </uni-data-picker>
        </uni-section>
        <view>
            <button class="btn" type="default" @click="showAddressInfo">所选中的地址信息</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                provinceList: [],
                currentAreaId: '', 
                area: [],
            }
        },
        onLoad() {
            this.queryProvinceDataListByPid('0');
        },
        methods: {
            queryProvinceDataListByPid(pid) {
                uni.request({
                    url: 'https://www.simoniu.com/commons/district/' + pid, //仅为示例，并非真实接口地址。
                    method: 'GET',
                    success: (res) => {
                        console.log(res.data);
                        if (res.data.code === 200) {
                            res.data.data.forEach((e, i) => {
                                let node = {
                                    id: e.id,
                                    text: e.name,
                                    value: e.id,
                                    children: []
                                }
                                this.provinceList.push(node);
                            })
                            //初始化城市列表......
                            this.initCityDataListById(this.provinceList[0], this.provinceList[0].value);

                            console.log("-----------省份数据列表-----------");
                            console.log(this.provinceList);
                        }
                    },
                    fail: (err) => {
                        console.log(err);
                    }
                });
            },

            async initCityDataListById(parentNode, id) {
                await uni.request({
                    url: 'https://www.simoniu.com/commons/district/' + id, //仅为示例，并非真实接口地址。
                    method: 'GET',
                    success: (res) => {
                        console.log(res.data);
                        if (res.data.code === 200) {
                            res.data.data.forEach((e, i) => {
                                //console.log(e);   
                                let node = {
                                    id: e.id,
                                    text: e.name,
                                    value: e.id,
                                    children: []
                                }
                                parentNode.children.push(node);
                            })

                            //初始化地区列表....
                            for (let j = 0; j < parentNode.children.length; j++) {
                                this.initZoneDataListById(parentNode.children[j], parentNode.children[j]
                                    .value);
                            }
                        }
                    },
                    fail: (err) => {
                        console.log(err);
                    }
                });
            },

            initZoneDataListById(parentNode, id) {
                uni.request({
                    url: 'https://www.simoniu.com/commons/district/' + id, //仅为示例，并非真实接口地址。
                    method: 'GET',
                    success: (res) => {
                        console.log(res.data);
                        if (res.data.code === 200) {
                            //arentNode.children=[];
                            res.data.data.forEach((e, i) => {
                                //console.log(e);   
                                let node = {
                                    id: e.id,
                                    text: e.name,
                                    value: e.id,
                                    children: []
                                }
                                parentNode.children.push(node);
                            })
                        }
                    },
                    fail: (err) => {
                        console.log(err);
                    }
                });
            },

            onnodeclick(e) {
                //console.log(e);
            },
            onpopupopened(e) {
                console.log('popupopened');
            },
            onpopupclosed(e) {
                console.log('popupclosed');
            },


            async onchange(e) {
                console.log('onchange:', e);
                let value = e.detail.value[0].value;
                value = value + "";
                if (value.length == 2) {
                    console.log("选中的是省份节点，编号：" + value);
                    for (let i = 0; i < this.provinceList.length; i++) {
                        if (this.provinceList[i].value == value) {
                            if (this.provinceList[i].children.length == 0) {
                                await this.initCityDataListById(this.provinceList[i], value);
                            }
                            break;
                        }
                    }
                }
                //重置选中的地址信息.....
                this.area = []
                e.detail.value.forEach((v, i) => {
                    this.area.push(v.text);
                });
                /*
                console.log("-----------当前provinceList-----------");
                console.log(this.provinceList);*/
                console.log("被选中的值：" + value);

            },

            showAddressInfo() {
                uni.showModal({
                    title: '地址信息',
                    content: JSON.stringify(this.area)
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        width: 80%;
        height: auto;
        padding: 20px;
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        margin: 0rpx auto;
    }

    .btn {
        margin: 40rpx 0 40rpx 0;
        width: 100%;

    }

    .text-box {
        text-align: start;
        width: 100%;
        word-break: break-all;
    }
</style>

运行效果：