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基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
送你43道JS面试题(收藏)
2019/06/17 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
用python实现百度翻译的示例代码
2018/03/09 Python
Python日志模块logging基本用法分析
2018/08/23 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
酒店出纳岗位职责
2013/12/29 职场文书
展会邀请函范文
2014/01/26 职场文书
境外导游求职信
2014/02/27 职场文书
南京青奥会口号
2014/06/12 职场文书
爱护公物标语
2014/06/24 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
小学教师读书笔记
2015/07/01 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
Java中的随机数Random
2022/03/17 Java/Android