如何在Vue中使用vue-area-linkage实现一个三级联动效果

本篇文章给大家分享的是有关如何在Vue中使用vue-area-linkage实现一个三级联动效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

目前创新互联建站已为1000+的企业提供了网站建设、域名、雅安服务器托管、网站托管、服务器托管、企业网站设计、猇亭网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

1.安装vue-area-linkage插件：npm install --save vue-area-linkage --registry=https://registry.npm.taobao.org --verbose

2.在main.js上进行依赖注入，如下图所示：

3.在对应vue文件的template模板上写html标签，如下图所示：

4.在对应vue文件的script上进行data默认，如下图所示：

此时效果已经基本实现，如下图所示：

注意：该插件有多种联动效果，我这里做的是省市区街四级联动，所以 :level='3'。需要其他效果可去网上查询其他效果代码，点击查看。

5.大家可以看到只是出现基本的效果，而样式看起来很不舒服，这是因为该插件的UI基于Element UI，所以如果需要使用样式需要依赖Element UI。但是很多情况下设计图的样式都是我们自定义的，此时可以自行修改样式代码，只需要在文件中写多一个公共的style文件修改对应的类名样式来覆盖之前的样式代码即可，需注意这个style文件不可以加上scoped，如下图红框所示：

以上就是如何在Vue中使用vue-area-linkage实现一个三级联动效果，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。