今天爬坑的过程中遇到一个需求就是用户地址,首先一开始想到的是数据库可以设计地区无限分类表,但是我们怎么能忘了我们强大的饿了么团队呢,于是上网搜了一下果然有非常好用的插件,下面来总结一下这个插件的用法
首先安装
npm install element-china-area-data -S
组件代码
<template>
<div>
<el-cascader
size="large"
:options="options"
v-model="selectedOptions"
@change="handleChange">
</el-cascader>
</div>
</template>
<script>
import { provinceAndCityData,CodeToText,TextToCode } from 'element-china-area-data' //引入
export default {
data () {
return {
options: provinceAndCityData,
selectedOptions: []
}
},
methods: {
handleChange (value) {
console.log(value);
}
}
}
</script>
当我们选择地址时,看控制台
显而易见 第一个区域码是省级,第二个则是市级,若是直辖市规律也是一样的。
下面来介绍 CodeToText和TextToCode的用法
CodeToText 用法: 区域码 => 地区名
控制台输出结果:
如果省市区域码都有的话,默认只输出市名
TextToCode 用法: 地区名 => 区域码 同理
记得结尾要加上 .code
输出结果:
还有一个需求 场景,就是用户在更改地址时,怎么从之前的地址开始呢?
非常简单
控制选项列表中选项值的正是 selectedOptions,所以我们只需要把原来的区域码附进去就行啦
点击改变 选项栏跳转到河北省保定市
这里要注意一点的就是 selectedOptions 赋值的时候不能只附最低级别的区域码 例如
点击改变不生效
每隔一段时间会更新一下文章,起到一个总结的作用,若以后某一天发现自己现在写的都是垃圾的话,说明自己真的进步了,嘿嘿嘿~