在一些需要填写地址的前端页面中,总是少不了需要填写地址的级联选择器,类似这样的:
在某依框架中,是直接把省市区的地址和编码放在了数据库里。个人觉得还是很头疼的:
- sql写起来麻烦。即使这样的sql只用写一次,后边的直接调用;
- 维护起来麻烦。万一增加了一个县,或者减少了一个区,头疼;
- 数据备份。这些数据加起来少说3000+,耗费时间和资源。
那有没有简单的方式呢?当然是有的,前端就有这样的一个库:
npm install element-china-area-data
但是,shigen
还是觉得麻烦,没错,可能我比较抓紧细节。
上周我们的vue项目我安装了一下,用的淘宝npm
景象,下载依赖的时候,竟然报错这个包找不到,最后换成了官方的镜像才找到的。正巧,今天看到了这个文档,我真觉得这个组件很大,功能强大,但是用的很少。为什么不自己封装一个呢?
说干就干。在gitee上找到了这个项目:中国省市区数据。这个json文件里就是全部的json数据:
具体的数据选择,也可参考官方文档:中国省市区数据项目。sh服务器托管网igen
的gitee页面突然卡住了,不知道是不是官方在升级,刷新了好几次都没用。
有了这个数据,我又想到了Element-ui有一个组件叫做el-cascader
,正好实现级联的效果。打开el-cascader文档,我开始了封装:
{{ data.name }}
({{ data.children.length }})
{{ addrCodes }} {{ addrCodesSelected }}
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);
}
}
}
代码里没有设置对应的传值绑定方法,可以自行定义。
最后运行的效果是这样的:
存储到后端只用对选择的值稍微处理一下即可。
学习资料:点此下载
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net