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

更新时间：2022年04月22日 09:09:45 作者：水星记_

省市区联动在日常开发中用的非常多，本文就介绍一下vue基于element-china-area-data插件实现省市区联动，具有一定的参考价值，感兴趣的可以了解一下

前言

前端开发的同学们应该都知道，省市区联动在日常开发中用的非常多，今天跟大家分享一款好用的插件 — 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 时，展示如下：

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

案例

省市二级联动（不带“全部”选项）:

<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插件实现省市区联动的文章就介绍到这了,更多相关vue 省市区联动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解Vue中的render: h =＞ h(App)示例代码
这篇文章主要介绍了Vue中的render: h =＞ h(App),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-09-09
使用mint-ui开发项目的一些心得(分享)
下面小编就为大家带来一篇使用mint-ui开发项目的一些心得(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Vue中request.js封装及调用示例详解
这篇文章主要为大家介绍了Vue中request.js封装及调用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
VueJS实现用户管理系统
这篇文章主要为大家详细介绍了VueJS实现用户管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
vue中下载文件的方法示例详解
这篇文章主要介绍了vue中下载文件的方法,通过实例代码讲解了下载后端返回文件和下载本地文件，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-11-11
vue2模拟vue-element-admin手写角色权限的实现
本文主要介绍了vue2模拟vue-element-admin手写角色权限的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
详解Vue改变数组中对象的属性不重新渲染View的解决方案
这篇文章主要介绍了详解Vue改变数组中对象的属性不重新渲染View的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue动态加载SVG文件并修改节点数据的操作代码
这篇文章主要介绍了vue动态加载SVG文件并修改节点数据的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-08-08
Element UI框架中巧用树选择器的实现
这篇文章主要介绍了Element UI框架中巧用树选择器的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
Vue自定义表单验证(rule，value，callback)使用详解
这篇文章主要介绍了Vue自定义表单验证(rule，value，callback)使用详解,今天我们讲一讲自定义验证规则具体使用场景和它的三个参数意思和使用，需要的朋友可以参考下
2023-07-07