实现效果图
主要功能:默认显示省级数据,点击列表查询下一级的区域数据,点击选中的区域,数据重置为当前区域下的区域数据,如果是四级则显示省级数据。
组件html、css
使用了 vant-ui 的 tabs 和 cell
<template>
<div class="area-content">
<div class="top">
<p class="title">所在地区</p>
<div class="select-box">
<van-tabs v-model="tabActive" @click="changeTab" >
<van-tab :title="item.areaName" v-for="item in areaTabs" :key="item.areaId"></van-tab>
</van-tabs>
<span v-if="showSelectTips" class="text-red">请选择</span>
</div>
</div>
<div class="list" >
<van-cell :class="[ lastAreaId === item.areaId ? 'active' :'']" :title="item.areaName" is-link v-for="(item, index) in areaLists" :key="item.areaId" @click="selectArea(index)" />
</div>
</div>
</template>
<style lang="scss" scoped>
.area-content {
display: flex; flex-direction: column; height: 75vh; background-color: $background-page;
.top {
flex: none; background-color: $color-white;
.title {
padding: 24px 24px 10px 24px; font-size: 28px; font-weight: 600; color: $color-base-font; }
.select-box {
@include flexFunction(center,'',''); padding-left: 10px;
/deep/ .van-tab {
flex: none; padding: 0 10px; margin: 0 5px;
.van-tab__text {
font-size: 28px;