vue实现省市区联动 element-china-area-data插件


Posted in Vue.js onApril 22, 2022

前言

前端开发的同学们应该都知道,省市区联动在日常开发中用的非常多,今天跟大家分享一款好用的插件 — element-china-area-data

安装

npm install element-china-area-data -S
cnpm install element-china-area-data -S

代码样例

<template>
  <div>
    <el-cascader size="large" :options="options" v-model="provinces" @change="handleChange" placeholder="请选择省市区"></el-cascader>
  </div>
</template>
 
<script>
import { regionData } from "element-china-area-data";//引入
export default {
  data() {
    return {
      options: regionData,//选择格式
      provinces: [], //省市区绑定数组
    };
  },

  methods: {
    // 事件触发
    handleChange(e) {
      console.log(e, "所选code值");
    },
  },
};
</script>

element-china-area-data 插件主要分成四种展示格式:

  • provinceAndCityData
  • provinceAndCityDataPlus
  • regionData
  • regionDataPlus

以下是设置不同属性时对应展示的格式:

1. provinceAndCityData 是省市两级联动数据且不带 "全部" 字样选项。当 options 的值为 provinceAndCityData 时,展示如下:

vue实现省市区联动 element-china-area-data插件

2. provinceAndCityDataPlus 是省市两级联动数据且显示 "全部" 字样选项。当 options 的值为 provinceAndCityDataPlus 时,展示如下:

vue实现省市区联动 element-china-area-data插件

3. regionData 是省市区三级联动数据且不带 "全部" 字样选项。当 options 的值为 regionData 时,展示如下:

vue实现省市区联动 element-china-area-data插件

4. regionDataPlus 是省市区三级联动数据且显示 "全部" 字样选项。当 options 的值为 regionDataPlus 时,展示如下:

vue实现省市区联动 element-china-area-data插件

注意: 当选择 “全部” 字样选项时,绑定的 value 值是空字符串。

vue实现省市区联动 element-china-area-data插件

案例

省市二级联动(不带“全部”选项):

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { provinceAndCityData } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: provinceAndCityData,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

省市二级联动(带“全部”选项):

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { provinceAndCityDataPlus } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: provinceAndCityDataPlus,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

省市三级联动(不带“全部”选项):

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { regionData } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionData,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

省市三级联动(带“全部”选项):

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { regionDataPlus } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionDataPlus,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

到此这篇关于vue基于element-china-area-data插件实现省市区联动的文章就介绍到这了!


Tags in this post...

Vue.js 相关文章推荐
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
vue修饰符.capture和.self的区别
Apr 22 #Vue.js
vue 自定义组件添加原生事件
Apr 21 #Vue.js
vue 自定义的组件绑定点击事件
Apr 21 #Vue.js
vue组件vue-esign实现电子签名
Apr 21 #Vue.js
vue动态绑定style样式
Apr 20 #Vue.js
Vue OpenLayer测距功能的实现
vue 给数组添加新对象并赋值
Apr 20 #Vue.js
You might like
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
jQuery 位置插件
2008/12/25 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
javascript调试说明
2010/06/07 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
巧用canvas
2017/01/21 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
详解python之配置日志的几种方式
2017/05/22 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
python 将Excel转Word的示例
2021/03/02 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
新东网科技Java笔试题
2012/07/13 面试题
英文简历中的自我评价用语
2013/12/09 职场文书
考试不及格检讨书
2014/01/09 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
毕业生应聘求职信
2014/07/10 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
Ajax实现三级联动效果
2021/10/05 Javascript