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

发布时间：2022-12-29 16:30:54 来源：亿速云阅读：140 作者：iii 栏目：开发技术

本篇内容主要讲解“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地址栏组件和这个非常类似，我因为这个地方错觉了，以为是一个，浪费了好多时间。

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

自带的是：

//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%' />

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

事件名	说明	参数
change	选中值发生变化时触发	目前选择的值

到此，相信大家对“vue中集成省市区街四级地址组件怎么实现”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

向AI问一下细节

猜你喜欢