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 18 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue3不同环境下实现配置代理
May 25 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中用foreach来操作数组的代码
2011/07/17 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
PHP attributes()函数讲解
2019/02/03 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
Python isinstance判断对象类型
2008/09/06 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
浅谈python中的占位符
2017/11/09 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
Python的历史与优缺点整理
2020/05/26 Python
为什么python比较流行
2020/06/19 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
员工评语大全
2014/01/19 职场文书
挂靠协议书范本
2014/04/22 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
表扬信格式模板
2015/05/05 职场文书
网吧温馨提示
2015/07/17 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle