Vue使用vue-area-linkage实现地址三级联动效果的示例

Vue使⽤vue-area-linkage实现地址三级联动效果的⽰例
很多时候我们需要使⽤地址三级联动，即省市区三级联动。

⽹上有很多插件，在此介绍Vue的⼀款地区联动插件：vue-area-linkage，下⾯介绍如何使⽤这个插件实现地址联动效果：
2.在main.js上进⾏依赖注⼊，如下图所⽰：
3.在对应vue⽂件的template模板上写html标签，如下图所⽰：
4.在对应vue⽂件的script上进⾏data默认，如下图所⽰：
此时效果已经基本实现，如下图所⽰：
注意：该插件有多种联动效果，我这⾥做的是省市区街四级联动，所以 :level='3'。

需要其他效果可去⽹上查询其他效果代码，。

5.⼤家可以看到只是出现基本的效果，⽽样式看起来很不舒服，这是因为该插件的UI基于Element UI，所以如果需要使⽤样式需要依赖Element UI。

但是很多情况下设计图的样式都是我们⾃定义的，此时可以⾃⾏修改样式代码，只需要在⽂件中写多⼀个公共的style⽂件修改对应的类名样式来覆盖之前的样式代码即可，需注意这个style⽂件不可以加上scoped，如下图红框所⽰：
此时效果如下图所⽰：
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。