vue中集成省市区街四级地址组件怎么实现

本文讲解"vue中集成省市区街四级地址组件如何实现"，希望能够解决相关问题。

效果图

首先我们可以先来看看效果图：

下拉选择器，可以切换成四个下拉列表级联，也可以切换成现在这样的，不同的标签。

代码实现

先安装area-linkage-vue的依赖，命令如下：

npm i --save vue-area-linkage area-data

在main.js中引入：

import { pca, pcaa } from 'area-data'; // v5 or higher
import VueAreaLinkage from 'vue-area-linkage';

Vue.use(VueAreaLinkage)

这个地方需要注意，由于自带的jeecg-boot地址栏组件和这个非常类似，我因为这个地方错觉了，以为是一个，浪费了好多时间。

自带的是：

//jeecg-boot原生的
import VueAreaLinkage from 'vue-area-linkage';
//jeecg原生的
Vue.use(VueAreaLinkage);

一定要区分开来，不然没有效果。

在需要添加的页面上引入：

  import { pcaa } from 'area-data-vue'

在data中写：

  pcaaData:pcaa,

在templete中写组件：

<area-cascader v-model='model.administrative' :data='pcaaData' :level='2' type='text' style='width: 100%' />

area-select 组件

v4 仅支持省市区联动，即 v4 不再支持 level 的值为 3(省市区街联动)

事件

关于 "vue中集成省市区街四级地址组件如何实现" 就介绍到此。希望多多支持编程宝库。

vue组件库如何开发使用：本文讲解"vue组件库怎么开发使用"，希望能够解决相关问题。 yarn workspace + lerna: 管理组件库及其生态项目考虑到组件库整体需要有多边资源支持，比如组件源码，库文档站点，c ...