uniapp 三级联动地区

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
    <view>
        <picker-view :indicator-style="indicatorStyle" @pickend="pickend" :value="value" @change="bindChange" class="picker-view">
            <picker-view-column >
                <view class="item" v-for="(item,index) in provinces" :key="index">{{item}}</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in citys" :key="index">{{item}}</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in areas" :key="index">{{item}}</view>
            </picker-view-column>
        </picker-view>
    </view>
</template>

<script>
    import {getProvinces,getMyCity,getAreas,getAreasCode} from "@/components/area.js"
    
    export default {
        data() {
            return {
                title: 'picker-view',
                provinces:[],
                citys:[],
                areas:[],
                value: [18, 2, 2],
                city_id: 0,
                visible: true,
                indicatorStyle: `height: 50px;`
            }
        },
        onLoad(){
            let index = [18, 2, 2]
            this.provinces = getProvinces()
            this.citys = getMyCity(index[0])
            this.areas = getAreas(index[0], index[1])
            this.city_id = getAreasCode(index[0], index[1], index[1])
            console.log('data',this.$data)
        },
        methods: {
            bindChange: function (e) {
                const val = e.detail.value
                if (typeof val[1] == 'undefined') {
                    val[1] = 0
                }
                if (typeof val[2] == 'undefined') {
                    val[2] = 0
                }
                this.changecity(val)
            },
            changecity(e){
                if(this.value[0] != e[0]){
                    e[1] = 0
                    e[2] = 0
                    this.citys = getMyCity(e[0])
                    this.areas = getAreas(e[0], e[1])
                }
                
                if(this.value[1] != e[1]){
                    this.areas = getAreas(e[0], e[1])
                }
                
                this.value = e
                this.city_id = getAreasCode(e[0], e[1], e[2])
            }
        }
    }
</script>

 
<style>
    .picker-view {
        width: 750rpx;
        height: 600rpx;
        margin-top: 20rpx;
    }
    .item {
        line-height: 100rpx;
        text-align: center;
    }
</style>

 JS地区文件：https://files.cnblogs.com/files/zhangzhijian/area.js?t=1723531032&download=true

CSS样式要一定添加才行