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动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue实现在data里引入相对路径
Jun 05 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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
php共享内存段示例分享
2014/01/20 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
python实现基于SVM手写数字识别功能
2020/05/27 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
Python字典实现伪切片功能
2020/10/28 Python
python多线程和多进程关系详解
2020/12/14 Python
python 数据类型强制转换的总结
2021/01/25 Python
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
平面设计自荐信
2013/10/07 职场文书
运动会解说词50字
2014/01/18 职场文书
法制宣传标语集锦
2014/06/25 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
体育委员竞选稿
2015/11/21 职场文书