三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下:(这个直接是个data,放入你的vue2项目中即可。(因为我的项目是用的vue2,所以,其他的属性跟博客内容是吻合的。请配合博客再下载此json))。
首先页面显示如下:
然后我们县级所在地区会出现三级联动,如下:(以下是片段,背景色未截取)
这个张什么样,以什么形式出现,取决于贵公司的UI需求,我们公司是做成弹出层了。。然后背景色透明,这里为了节省流量,我只截取了一段,最后显示如下:
如果贵公司也跟我们需求一样,希望这个可以帮到你们。下面是在vue2项目中写的三级联动代码以及css样式:
rush:xhtml;">
所在地区:{{Province?Province:''}} {{City?City:''}} {{district?district:''}}
districtSelected()" :class="
district?'':'active'" v-show="City">
{{
district?
district:'请选择'}}
-
-
- districtList"
@click="getdistrictId(v.id,k)"
v-show="showdistrict"
:class="v.selected ? 'active' : ''">{{v.name}}
这样就完成了一个省市区的三级联动。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。