URCloud

/ 换个头像心好累 / 0评 / 1/ 最后更新:2021-12-09
element ui省市区地区选择器

需求场景

element ui一直没有开箱即用省市区地区选择器,可能是考虑国际化的原因。想要实现,可以基于cascader组件。那么问题来了,哪里有稳定持续维护的省市区数据源?看到不少文章使用的是`element-china-area-data`npm 包,看了下数据源已经很久没更新了,此外这个包的省市区还加上了市辖区三个字,感觉没啥意义。

解决方案

由于移动端经常使用vant组件库,里面的Area组件刚好提供了数据源npm包https://www.npmjs.com/package/@vant/area-data,为了保持移动端和桌面端省市区数据的一致性,于是发布了一个基于此数据源生成的符合element ui cascader组件格式的npm包https://www.npmjs.com/package/@urcloud/area-data

实现功能

数据格式

[
 {
    label:'北京市',
    value:'110000',
    children:[
      {
        label:'北京市',
        value:'110100',
        children:[
          {
            lable:'东城区',
            value:'110101'
          },
          ...
        ]
      },
      ...
    ]
  },
  ...
]

使用方式

<template>
    <div class="demo-title demo-1">vant数据源:</div>
   <el-cascader
      v-model="value1"
      :options="options1"
    ></el-cascader>
     <div class="demo-title demo-2">vant数据源:加全部</div>
   <el-cascader
      v-model="value2"
      :options="options2"
    ></el-cascader>
</template>
<script>
import {defineComponent} from 'vue';
import  {getAreaTree} from '@urcloud/china-area-data';
export default defineComponent({
    setup(){
      return {
        value1:'',
        options1:getAreaTree(),
        value2:'',
        options2:getAreaTree(true),
      }
    }
})
</script>
1

Leave a Reply

Your email address will not be published.