vue四级区域联动

实现效果图

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

组件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; 
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue四级联动下拉菜单可以使用Vue的数据绑定和组件化思想来实现。具体操作如下: 1. 在父组件中定义一个数组,存储四级联动数据。 2. 定义三个子组件,分别用来显示省、市、区的下拉菜单。 3. 在父组件中使用v-for指令遍历数组,将数据传递给子组件。 4. 在子组件中定义props属性,接受父组件传递过来的数据。 5. 在子组件的template中使用v-for指令遍历数据,渲染下拉菜单。 6. 在子组件的methods中定义一个change事件,用来触发父组件的数据更新操作。 具体代码如下: 父组件: ``` <template> <div> <province-select :provinces="provinces" @change="handleProvinceChange" /> <city-select :cities="cities" @change="handleCityChange" /> <district-select :districts="districts" @change="handleDistrictChange" /> </div> </template> <script> import ProvinceSelect from './ProvinceSelect.vue' import CitySelect from './CitySelect.vue' import DistrictSelect from './DistrictSelect.vue' export default { components: { ProvinceSelect, CitySelect, DistrictSelect }, data() { return { provinces: [ { id: 1, name: '北京市' }, { id: 2, name: '上海市' }, { id: 3, name: '广东省' } ], cities: [], districts: [] } }, methods: { handleProvinceChange(province) { this.cities = [ { id: 1, name: '北京市' }, { id: 2, name: '上海市' }, { id: 3, name: '广州市' } ] this.districts = [] }, handleCityChange(city) { this.districts = [ { id: 1, name: '东城区' }, { id: 2, name: '西城区' }, { id: 3, name: '黄浦区' }, { id: 4, name: '徐汇区' }, { id: 5, name: '天河区' }, { id: 6, name: '番禺区' } ] }, handleDistrictChange(district) { console.log(district) } } } </script> ``` 省级子组件: ``` <template> <div> <select v-model="selectedProvince" @change="handleChange"> <option value="">请选择省份</option> <option v-for="province in provinces" :key="province.id" :value="province">{{province.name}}</option> </select> </div> </template> <script> export default { props: { provinces: { type: Array, default: [] } }, data() { return { selectedProvince: null } }, methods: { handleChange() { this.$emit('change', this.selectedProvince) } } } </script> ``` 市级子组件: ``` <template> <div> <select v-model="selectedCity" @change="handleChange"> <option value="">请选择城市</option> <option v-for="city in cities" :key="city.id" :value="city">{{city.name}}</option> </select> </div> </template> <script> export default { props: { cities: { type: Array, default: [] } }, data() { return { selectedCity: null } }, methods: { handleChange() { this.$emit('change', this.selectedCity) } } } </script> ``` 区级子组件: ``` <template> <div> <select v-model="selectedDistrict" @change="handleChange"> <option value="">请选择区县</option> <option v-for="district in districts" :key="district.id" :value="district">{{district.name}}</option> </select> </div> </template> <script> export default { props: { districts: { type: Array, default: [] } }, data() { return { selectedDistrict: null } }, methods: { handleChange() { this.$emit('change', this.selectedDistrict) } } } </script> ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值