更新记录

1.0.2（2025-08-01） 下载此版本

1、在原支持数据源上增加支持全数据列表

2、添加树形id、pid、hasChild，更方便小伙伴使用

3、完善示例

4、修复数据变化页面未正确显示bug

1.0.1（2025-06-30） 下载此版本

修改源数据类型bug

调整组件样式

1.0.0（2025-06-30） 下载此版本

1、区划选择，支持树形静态数据、层级动态数据

2、支持树形子项字段、区划名字段、区划编号字段重定义

3、回传常用数据，方便小伙伴使用

平台兼容性

uni-app

uni-app x

其他

写在最前面

小伙伴在使用过程中遇到任何问题或发现功能不足的地方，欢迎随时留言反馈，您的宝贵意见将帮助我持续完善插件功能，在此衷心感谢您的支持与帮助！

sjx-area-select

该组件为uni_modules组件，下载导入后可以全局直接使用，无需在页面中引入、声明组件

Props

Events

内置点击tabs重新选择区划

代码演示

页面代码

<template>
    <view style="padding: 10px;">
        <view class="show">{{areaName?`当前选择的区域名：${areaName}；区划代码：${areaNumber}；区域全名：${areaFullName}`:'请点击按钮选择区域'}}
        </view>
        <view class="item">
            <button type="primary" size="mini" @click="selectArea">动态选择区域</button>
            <view class="ensure" v-if="isShow"> <text>点击确定，选择当前区划</text> <button type="warn" size="mini"
                    @click="isShow=false">确定</button></view>
            <!-- dataType:2 懒加载数据 -->
            <sjx-area-select style="min-height: 100px;" v-if="isShow" :areaArr="firstArea" @areaClick='getArea'
                areaName="name" areaNumber="code" :dataType="2" :requestData="requestData" hasChild="hasChildss"
                id='temid'></sjx-area-select>
        </view>
        <view class="item">
            <button type="primary" size="mini" @click="selectAreaTree" style="margin-top: 10px;">静态选择区域</button>
            <view class="ensure" v-if="isShowStatic"> <text>点击确定，选择当前区划</text> <button type="warn" size="mini"
                    @click="isShowStatic=false">确定</button></view>
            <sjx-area-select v-if="isShowStatic" :areaArr="areaArr" @areaClick='getAreaTree' areaName="name"
                areaNumber="code" childsName="children"></sjx-area-select>
        </view>
        <view class="item">
            <button type="primary" size="mini" @click="selectAreaAllTree" style="margin-top: 10px;">静态全数据选择区域</button>
            <view class="ensure" v-if="isShowAll"> <text>点击确定，选择当前区划</text> <button type="warn" size="mini"
                    @click="isShowAll=false">确定</button></view>
            <sjx-area-select v-if="isShowAll" :areaArr="areaAllArr" :dataType="1" @areaClick='getAreaAllTree'
                areaName="name" areaNumber="code"></sjx-area-select>
        </view>
    </view>
</template>

动态选择区域

selectArea() {
    this.getFirstArea()
},
getFirstArea() {
    uni.showLoading({
        title: '加载中。。。'
    })
    setTimeout(() => {
        this.firstArea = []
        this.firstArea.push({
            temid: 1,
            name: '河南省',
            code: '410000',
            hasChildss: true
        })
        this.isShow = true
        uni.hideLoading()
    }, 1000)
}
/* item--当前项；areaName--当前区划名；areaNameArr--全区全名称数组；areaNumber--当前区划代码；isLeaf--是否是最后一级 */
getArea(item, areaName, areaNameArr, areaNumber, isLeaf) {
    this.areaName = areaName
    this.areaNumber = areaNumber
    this.areaFullName = areaNameArr.join('')
    if (item.childs && item.childs.length > 0) {
        return
    }
    if (isLeaf) {
        this.requestData = []
        this.isShow = false
    } else {
        /* 模拟接口请求 */
        setTimeout(() => {
            if (item.temid == 1) {
                this.requestData = [{
                    temid: 2,
                    name: '郑州市',
                    code: '410100',
                    hasChildss: true
                }, {
                    temid: 3,
                    name: '洛阳市',
                    code: '410300',
                    hasChildss: true
                }, {
                    temid: 4,
                    name: '平顶山市',
                    code: '410400',
                    hasChildss: false
                }]
            } else if (item.temid == 2) {
                this.requestData = [{
                    temid: 5,
                    name: '市辖区',
                    code: '410101',
                    hasChildss: false
                }, {
                    temid: 6,
                    name: '中原区',
                    code: '410102',
                    hasChildss: false
                }, {
                    temid: 7,
                    name: '二七区',
                    code: '410103',
                    hasChildss: false
                }]
            } else if (item.temid == 3) {
                this.requestData = [{
                    temid: 8,
                    name: '市辖区',
                    code: '410301',
                    hasChildss: false
                }, {
                    temid: 9,
                    name: '老城区',
                    code: '410302',
                    hasChildss: false
                }, {
                    temid: 10,
                    name: '西工区',
                    code: '410303',
                    hasChildss: false
                }]
            } else {
                this.requestData = []
                this.isShow = false
            }
        }, 1000)
    }
}

静态选择区域

selectAreaTree() {
    this.isShowStatic = true
},
/* item--当前项；areaName--当前区划名；areaNameArr--全区全名称数组；areaNumber--当前区划代码；isLeaf--是否是最后一级 */
getAreaTree(item, areaName, areaNameArr, areaNumber, isLeaf) {
    this.areaName = areaName
    this.areaNumber = areaNumber
    this.areaFullName = areaNameArr.join('')
    this.isShowStatic = !isLeaf
}

静态全数据选择区域

selectAreaAllTree() {
    this.isShowAll = true
},
getAreaAllTree(item, areaName, areaNameArr, areaNumber, isLeaf) {
    this.areaName = areaName
    this.areaNumber = areaNumber
    this.areaFullName = areaNameArr.join('')
    this.isShowAll = !isLeaf
}