📄 省市区街四级联动组件

省市区三级联动

const ChinaArea = defineAsyncComponent(
  () => import("/@/components/ChinaArea/index.vue")
);

<china-area v-model="data" @change="handleChange"/>;

// 双向绑定数据 自动回显： 北京市/市辖区/东城区
const data = ref("11,1101,110101");

// 可选 输出： 11,1101,110101
const handleChange = (val: String) => { }

属性说明

属性名称	描述	类型
v-model	双向绑定	String
type	省级 1 市 2 区 3 街道 4	Number
plus	默认 false， 不用选择某级	Boolean
@change	选中回调事件	Function

完整区划数据

下载 👉🏻 省市街区详细 SQL (opens new window)，导入至 sys_area 表即可。

如果此数据（来自民政部 2023 年的数据）中不存在对应地区，您可以根据规则自行新增。请注意，编码需保持唯一。