vue+Element UI实现省市区镇四级联动封装

原创

shigen

发布于 2024-01-28 12:26:42

2310

发布于 2024-01-28 12:26:42

文章被收录于专栏：shigen的学习笔记shigen的学习笔记

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

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

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

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

那有没有简单的方式呢？当然是有的，前端就有这样的一个库：

npm install element-china-area-data

具体的使用可以参考对应的官方文档或者博客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>