vue 中国省市区级联数据下拉工具

vue 中国省市区级联数据下拉工具

最近vue玩的时候需要有一个全国省市区县的下拉工具选择地区,并且需要获取地市的行政编码。找了一个比较好用的插件,稍微分享一下。

element-china-area-data

这是一个中国省市区连级数据下拉工具,可以获取行政区编码,也可以获取省市区的名称,具体的效果是下面的样子。

在这里插入图片描述

element-china-area-data 使用

这个工具使用起来也很简单。

npm 网址: https://www.npmjs.com/package/element-china-area-data

安装

使用 npm 安装。

npm install element-china-area-data -S

在需要使用连级选择的页面引入插件。

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

说明:

  • provinceAndCityData是省市二级联动数据(不带“全部”选项)
  • regionData是省市区三级联动数据(不带“全部”选项)
  • provinceAndCityDataPlus是省市区三级联动数据(带“全部”选项)
  • regionDataPlus是省市区三级联动数据(带“全部”选项)
  • “全部"选项绑定的value是空字符串”"
  • CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText[‘110000’]输出北京市
  • TextToCode是个大对象,属性是汉字,属性值是区域码 用法例如:
    • TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100
    • TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105

案例

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { regionDataPlus } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionDataPlus,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

好了,具体可以看 npm 网站的案例。

首先,你需要安装Naive UI组件库和Vue3。可以使用以下命令进行安装: ``` npm install naive-ui vue@next ``` 然后,你需要创建一个Vue组件来实现省市区级联选择器。你可以使用Typescript编写组件。 ```typescript <template> <div> <n-cascader v-model:value="value" :options="options" :load-data="loadData" :props="cascaderProps" ></n-cascader> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { CascaderOption } from 'naive-ui'; import { getAreasByCode } from '@/api/area'; export default defineComponent({ name: 'AreaPicker', setup() { const value = ref<string[]>([]); const options = ref<CascaderOption[]>([]); const cascaderProps = { label: 'name', value: 'code', children: 'children', isLeaf: 'isLeaf' }; const loadData = async (node: CascaderOption): Promise<void> => { if (node.children) { return; } const areas = await getAreasByCode(node.code); node.children = areas.map((area) => ({ code: area.code, name: area.name, isLeaf: area.isLeaf })); }; return { value, options, loadData, cascaderProps }; } }); </script> ``` 在上面的代码中,我们使用了`n-cascader`组件来实现省市区级联选择器。我们可以通过`options`属性提供级联选择器的初始选项,通过`loadData`函数来动态加载下一级的选项。我们还可以通过`cascaderProps`属性来定义级联选择器中每个选项的属性名称。 最后,我们需要编写一个API函数`getAreasByCode`来获取省市区数据。在这个函数中,我们可以使用axios或其他工具来向后端请求数据。这里为了简化代码,我们直接返回了一个模拟的数据。 ```typescript interface Area { code: string; name: string; isLeaf: boolean; } const areas: Area[] = [ { code: '110000', name: '北京市', isLeaf: false }, { code: '120000', name: '天津市', isLeaf: false }, { code: '130000', name: '河北省', isLeaf: false } // ... ]; export const getAreasByCode = async (code: string): Promise<Area[]> => { // 在实际应用中,这里可以向后端请求数据 // 这里只是返回一个模拟数据 return areas.filter((area) => area.code.startsWith(code.slice(0, 2))); }; ``` 最后,在你的Vue应用中使用这个组件。 ```typescript <template> <div> <area-picker></area-picker> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import AreaPicker from '@/components/AreaPicker.vue'; export default defineComponent({ name: 'App', components: { AreaPicker } }); </script> ``` 这样,你就可以使用基于Naive UI组件库的Vue3省市区级联选择器了!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值