在 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'}]}]}
]

8.效果图