在 Vue 项目中使用地区级联选

在 Vue 项目中使用地区级联选择的完整流程：

1.安装依赖包，这个包提供了中国省市区的完整数据。

npm install element-china-area-data --save

2.导入数据

import { regionData } from 'element-china-area-data'

这个包提供了几种不同的数据格式：

regionData: 省市区三级联动数据

provinceAndCityData: 省市二级联动数据

3.数据格式说明

// regionData 的数据结构

[

{

value: '110000', // 地区编码

label: '北京市', // 地区名称

children: [ // 子地区

{

value: '110100',

label: '北京市',

children: [

{

value: '110101',

label: '东城区'

}

// ... 其他区

]

}

]

}

// ... 其他省份

]

4.在模板中使用级联选择器

<el-form-item label="所在地区" prop="location"><el-cascaderv-model="registerForm.location":options="locationOptions"placeholder="请选择所在地区":props="{value: 'value',    // 指定选项的值为选项对象的 value 属性label: 'label',    // 指定选项标签为选项对象的 label 属性children: 'children'// 指定选项的子选项为选项对象的 children 属性}"style="width: 100%"/>
</el-form-item>

5.在 setup 中定义数据

const registerForm = ref({location: []  // 用于存储选择的地区编码数组
})// 在 return 中返回数据
return {locationOptions: regionData,  // 地区数据registerForm
}

6.处理选择的数据

const handleRegister = async () => {// location 数组中包含了选择的地区编码// 例如：['110000', '110100', '110101'] 表示 北京市/北京市/东城区const locationText = registerForm.value.location.join('/')// 发送到后端的数据const registerData = {// ... 其他数据company: {location: locationText,  // 转换成文本格式：'110000/110100/110101'// ... 其他数据}}
}

7.添加表单验证

// area-data.js
export const customRegionData = [{value: 'region1',label: '地区1',children: [{value: 'city1',label: '城市1',children: [{value: 'district1',label: '区域1'}]}]}
]