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中点击组件外关闭组件的实现方法
下面小编就为大家分享一篇基于Vue中点击组件外关闭组件的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Element Cascader 级联选择器的使用示例
这篇文章主要介绍了Element Cascader 级联选择器的使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
electron打包vue项目的方法步骤
本文主要介绍了electron打包vue项目，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
前端vue实现甘特图功能
dhtmlxGantt是一个强大的JavaScript Gantt图表库,提供易于使用、高度可自定义的Gantt图表组件,它支持多项任务和进度条,以及多种列和行布局,可用于创建各种类型的时间线和计划表,本文给大家介绍前端vue实现甘特图的相关知识,感兴趣的朋友跟随小编一起看看吧
2024-04-04
使用Vue3和ApexCharts绘制交互式热力图
热力图是一种数据可视化技术,它使用颜色来表示数据点的值,热力图常用于可视化分布数据,例如人口密度、温度变化或网站流量,本文给大家介绍了如何使用Vue3和ApexCharts创建交互式热力图,需要的朋友可以参考下
2024-06-06
vue2实现在el-table里插入el-tag的示例代码
这篇文章主要介绍了vue2实现在el-table里插入el-tag的示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-12-12
Vue中的methods、computed计算属性和watch监听属性的使用和区别解析
这篇文章主要介绍了Vue中的methods、computed计算属性和watch监听属性的使用和区别,本文通过示例代码给大家介绍的非常详细对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-01-01
vue中使用GraphQL的实例代码
这篇文章主要介绍了vue中使用GraphQL的实例代码,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-11-11
vue单文件组件lint error自动fix与styleLint报错自动fix详解
这篇文章主要给大家介绍了关于vue单文件组件lint error自动fix与styleLint报错自动fix的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-01-01
解决vue scoped html样式无效的问题
这篇文章主要介绍了解决vue scoped html样式无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10