最简单的el-cascadert省市区三级/二级联动

需求:需要实现省市区的三级联动或者二级联动的功能,找了半天找到这个最简单的插件实现,无需自己找json,直接下载导入就有了。

插件地址:element-china-area-data - npm (npmjs.com)

里面有使用方法,我就是跟着里面的方法写的,此贴就是记录贴。

1.效果

2.下载插件

我下的最新版,这边要注意一下,有些小伙伴下的是旧版,旧版的**codeToText是大写的C,**新版改成小写了

复制代码
npm install element-china-area-data

3.导入

这个根据需求导入哈

字段讲解:

  1. provinceAndCityData省市二级联动数据,汉字+code
  2. regionData省市区三级联动数据
  3. pcTextArr省市联动数据,纯汉字
  4. pcaTextArr省市区联动数据,纯汉字
  5. codeToText是个大对象,属性是区域码,属性值是汉字 用法例如:codeToText['110000']输出北京市
javascript 复制代码
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data"; //导入地图数据

4.二级联动使用

javascript 复制代码
<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="provinceAndCityData"
      v-model="selectedOptions">
    </el-cascader>
  </div>
</template>

<script>
  import { provinceAndCityData } from 'element-china-area-data'
  export default {
    data () {
      return {
        provinceAndCityData,
        selectedOptions: []
      }
    },
  }
</script>

效果

5.省市区三级联动

javascript 复制代码
<template>
    <div class="content-box">
        <div class="container">
                <el-cascader
                    size="large"
                    clearable
                    ref="cascader"
                    :options="options"
                    v-model="params.selectedOptions"
                    @change="handleChange"
                    class="w250"
                >
                </el-cascader>
        </div>
    </div>
</template>

<script>
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data"; //导入地图数据

export default {
    data() {
        return {
            options: regionData,
            params: {
                //params为向后台发送请求的请求体,为什么要将selectedOptions写在请求体中请向后看
                selectedOptions: [],
            }
        };
    },
    mounted(){
      console.log(provinceAndCityData,'二级市区');
    },
    methods: {
        // 地图
        handleChange(e) {
          console.log(e,'省市区');
        }
    }
};
</script>

<style lang="scss" scoped></style>

还有其他的可以自行探索,文章到此结束,希望对你有所帮助~

相关推荐
尘世中一位迷途小书童8 分钟前
Monorepo 工具大比拼:为什么我最终选择了 pnpm + Turborepo?
前端·架构
一枚前端小能手10 分钟前
🔍 重写vue之ref和reactive
前端·javascript·vue.js
星链引擎12 分钟前
4sapi.com开发者进阶版(技术导向,侧重 “原理 + 最佳实践”)
前端
尘世中一位迷途小书童14 分钟前
2025年了,你还在用传统的多仓库管理吗?Monorepo 架构深度解析
前端·架构
fruge16 分钟前
前端性能优化实践指南:从理论到落地
前端·性能优化
快起来别睡了21 分钟前
用这 9 个 API,我把页面性能干到了 90+
前端
芒果茶叶32 分钟前
深入浅出requestAnimationFrame
前端·javascript·html
歪歪10034 分钟前
在哪些场景下适合使用 v-model 机制?
服务器·前端·javascript·servlet·前端框架·js
亲爱的马哥36 分钟前
再见,TDuckX3.0 结束了
前端·后端·github
KrystalMeiling1 小时前
讲解react的useEffect用法,被监听字段的注意事项
前端