vue四级区域联动

最新推荐文章于 2024-07-15 14:04:03 发布

有只猫咪叫小花

最新推荐文章于 2024-07-15 14:04:03 发布

阅读量1.7k

点赞数 1

文章标签： vue js

本文链接：https://blog.csdn.net/LouYQ0213/article/details/118361111

版权

本文介绍了如何使用Vue和Vant-UI库实现四级区域联动的功能。内容包括展示实现效果，详细展示了组件的HTML、CSS结构，以及组件JavaScript部分的实现逻辑。数据格式和组件的用法也进行了说明。

摘要由CSDN通过智能技术生成

实现效果图

主要功能：默认显示省级数据，点击列表查询下一级的区域数据，点击选中的区域，数据重置为当前区域下的区域数据，如果是四级则显示省级数据。
效果图

组件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;