vue使用element级联选择器实现选择国内地址（到区县）

最新推荐文章于 2025-06-03 10:41:24 发布

原创最新推荐文章于 2025-06-03 10:41:24 发布 · 943 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本方法是使用第三方库

1.下载全省市区的数据

npm install element-china-area-data -S

如果使用vscode运行报错，就使用管理员打开cmd来到你前端对应的文件夹位置
再次执行该命令

2.下载完成后导入使用

import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";

// provinceAndCityData：省市二级联动数据,汉字+code
// regionData：省市区三级联动数据
// pcTextArr：省市联动数据，纯汉字
// pcaTextArr：省市区联动数据，纯汉字
// codeToText：是个大对象，属性是区域码，属性值是汉字用法例如：codeToText[‘110000’]输出北京市

可按需引用，也可全部引用

3.具体使用

只需要注意return里的两个变量
我使用的是纯汉字传入后端

export default {
  name: "Code",
  dicts: ['base_status'],
  data () {
    return {
      pcaTextArr,
      selectedOptions: [],

表单导入使用
我是在后端处理该数据的，所以v-model="form.addressArray"

        <el-form-item
          label="客户地址"
          prop="addressArray"
        >
          <template>
            <div id="app">
              <el-cascader
                size="large"
                :options="pcaTextArr"
                v-model="form.addressArray" // 前端处理请绑定selectedOptions
                clearable
              >
              </el-cascader>
            </div>
          </template>

        </el-form-item>