更新记录

1.0.0（2026-01-20） 下载此版本

城市级联选择器 初始版本

平台兼容性

uni-app(4.87)

city-data-picker

带城市搜索功能的级联选择器 城市选择器 兼容H5和小程序

快速开始

<script setup>
import { ref, computed } from 'vue'

const data = ref([
    {
        "name": "北京市",
        "id": "11",
        "children": [
            {
                "name": "市辖区",
                "id": "1101",
                "children": [
                    {
                        "name": "东城区",
                        "id": "110101"
                    },
                    {
                        "name": "西城区",
                        "id": "110102"
                    }
                ]
            }
        ]
    },
    {
        "name": "天津市",
        "id": "12",
        "children": [
            {
                "name": "市辖区",
                "id": "1201",
                "children": [
                    {
                        "name": "和平区",
                        "id": "120101"
                    },
                    {
                        "name": "河东区",
                        "id": "120102"
                    }
                ]
            }
        ]
    }
])
const show = ref(false)

const cityList = ref([])
const cityText = computed(() => {
  return cityList.value.map((item) => item.name).join(' / ')
})

const handleSelectCity = (city) => {
    console.log(city, 'handleSelectCity')
    cityList.value.push(city)
}

</script>

<template>
    <view>
        <button @click="show = true">打开城市选择器</button>
        <text>{{ cityText }}</text>
        <city-data-picker :data="data" v-model:show="show" @selectCity="handleSelectCity" />
    </view>
</template>

Props

事件

数据格式

{
    "name": "北京市",
    "id": "11",
    "children": [
        {
            "name": "市辖区",
            "id": "1101",
            "children": [
                {
                    "name": "东城区",
                    "id": "110101"
                },
                {
                    "name": "西城区",
                    "id": "110102"
                }
            ]
        }
    ]
}

说明

• 项目完全免费开源
• 参考了tree-picker 树形选择器 - DCloud 插件市场

安装

• 支持uni_modules，一键式安装

协议

MIT