当前位置:   article > 正文

vue+Element UI实现省市区镇四级联动_让element-china-area-data插件省市镇区四级联动

让element-china-area-data插件省市镇区四级联动

shigen坚持更新文章的博客写手,擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长,分享认知,留住感动。

在一些需要填写地址的前端页面中,总是少不了需要填写地址的级联选择器,类似这样的:

地址级联选择

在某依框架中,是直接把省市区的地址和编码放在了数据库里。个人觉得还是很头疼的:

  1. sql写起来麻烦。即使这样的sql只用写一次,后边的直接调用;
  2. 维护起来麻烦。万一增加了一个县,或者减少了一个区,头疼;
  3. 数据备份。这些数据加起来少说3000+,耗费时间和资源。

那有没有简单的方式呢?当然是有的,前端就有这样的一个库:

npm install element-china-area-data
  • 1

具体的使用可以参考对应的官方文档或者博客vue+Element UI 实现中国省市区三级联动

但是,shigen还是觉得麻烦,没错,可能我比较抓紧细节。

上周我们的vue项目我安装了一下,用的淘宝npm景象,下载依赖的时候,竟然报错这个包找不到,最后换成了官方的镜像才找到的。正巧,今天看到了这个文档,我真觉得这个组件很大,功能强大,但是用的很少。为什么不自己封装一个呢?

说干就干。在gitee上找到了这个项目:中国省市区数据。这个json文件里就是全部的json数据:

省市区四级数据

具体的数据选择,也可参考官方文档:中国省市区数据项目shigen的gitee页面突然卡住了,不知道是不是官方在升级,刷新了好几次都没用。

有了这个数据,我又想到了Element-ui有一个组件叫做el-cascader,正好实现级联的效果。打开el-cascader文档,我开始了封装:

<template>
  <div>
    <el-cascader :options="options" :props="{ checkStrictly: true, value: 'code', label: 'name' }" ref="cascaderAddr"
      v-model="selectedOptions" @change="handleChange">
      <template slot-scope="{ node, data }">
        <span>{{ data.name }}</span>
        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
      </template>
    </el-cascader>
    <p>{{ addrCodes }} {{ addrCodesSelected }}</p>
  </div>
</template>

<script>
let pcas = require('@/assets/pcas-code.json')

export default {
  name: 'ChinaPca',
  data() {
    return {
      options: pcas,
      selectedOptions: [],
      addrCodes: [],
      addrCodesSelected: [],
    }
  },
  methods: {
    // 获取省市区地址级联
    handleChange(thsAreaCode) {
      thsAreaCode = this.$refs['cascaderAddr'].getCheckedNodes()[0]
      this.addrCodes = thsAreaCode.path
      this.addrCodesSelected = thsAreaCode.pathLabels
      console.log(this.addrCodesSelected);
    }
  }
}
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

代码里没有设置对应的传值绑定方法,可以自行定义。

最后运行的效果是这样的:

运行效果

存储到后端只用对选择的值稍微处理一下即可。


以上就是今天分享的全部内容了,觉得不错的话,记得点赞 在看 关注支持一下哈,您的鼓励和支持将是shigen坚持日更的动力。同时,shigen在多个平台都有文章的同步,也可以同步的浏览和订阅:

平台账号链接
CSDNshigen01shigen的CSDN主页
知乎gen-2019shigen的知乎主页
掘金shigen01shigen的掘金主页
腾讯云开发者社区shigenshigen的腾讯云开发者社区主页
微信公众平台shigen公众号名:shigen

shigen一起,每天不一样!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Li_阴宅/article/detail/773339
推荐阅读
相关标签
  

闽ICP备14008679号