更新记录

1.0.0（2025-04-17） 下载此版本

省市区、树形数据，三级联动选择器

平台兼容性

uni-app

其他

uniapp 省市区三级联动选择器

组件名：dj-area-picker 代码块： <dj-area-picker>

dj-area-picker组件是省市区三级联动选择器组件，支持树行结构的地区数据渲染，编译兼容H5+小程序端+App端。

引入方式

import djAreaPicker from '../../components/dj-area-picker/dj-area-picker.vue';
export default {
    components: {
        djAreaPicker
    },
    data() {
        return {

        }
    },
    methods: {
    }
}

基本用法

示例

• view代码

<dj-area-picker :areaData="areaData" :defaultCode="defaultCode" @change="changeArea">
    <view name="slot" class="picker">
        当前选择：{{ data.province.name }} - {{ data.city.name }} - {{ data.area.name }}
    </view>
</dj-area-picker>

• html代码实现

<template>
    <view>
        <dj-area-picker :areaData="areaData" :defaultCode="defaultCode" @change="changeArea">
            <view name="slot" class="picker">
                当前选择：{{ data.province.name }} - {{ data.city.name }} - {{ data.area.name }}
            </view>
        </dj-area-picker>
    </view>
</template>

<script>
    import djAreaPicker from '../../components/dj-area-picker/dj-area-picker.vue';
    export default {
        components: {
            djAreaPicker
        },
        data() {
            return {
                defaultCode:['310000','310100','310104'],
                areaData:[
                    { 
                        name: '北京市', 
                        code: '110000',
                        child:[
                            { 
                              name: '北京市', 
                              code: '110100' ,
                              child:[
                                  { name: '东城区', code: '110101' },
                                  { name: '西城区', code: '110102' }
                              ]
                            }
                        ],
                    },
                    {
                        name: '上海市', 
                        code: '310000',
                        child:[
                            { 
                              name: '上海市', 
                              code: '310100' ,
                              child:[
                                  { name: '黄浦区', code: '310101' },
                                  { name: '徐汇区', code: '310104' }
                              ]
                            }
                        ],
                    },
                    {
                        name: '广东省', 
                        code: '440000',
                        child:[
                            { 
                              name: '广州市', 
                              code: '440100' ,
                              child:[
                                  { name: '天河区', code: '440106' },
                                  { name: '海珠区', code: '440105' }
                              ]
                            },
                            {
                              name: '深圳市', 
                              code: '440300' ,
                              child:[
                                  { name: '福田区', code: '440304' },
                                  { name: '南山区', code: '440305' }
                              ]
                            }
                        ],
                    },
                ],
                data:{
                    province:{code:'',name:''},
                    city:{code:'',name:''},
                    area:{code:'',name:''}
                },
            };
        },
        methods: {
            // 选择后的回调
            changeArea(e){
                console.log(e);
                this.data = e;
            }
        }
    };
</script>

<style scoped>
.picker {
  padding: 20px;
  border: 1px solid #eee;
}
</style>      

API

dj-area-picker Props

events

最后

使用中有什么问题请及时反馈 谢谢 好用满意请发个好评谢谢！️