uniapp 城市三级联动（自定义组件）

邯郸达文西

已于 2023-03-04 18:41:18 修改

阅读量2k

点赞数

文章标签： uni-app javascript html

于 2023-03-04 18:37:31 首次发布

本文链接：https://blog.csdn.net/weixin_45881304/article/details/129337623

版权

城市三级联动（自定义组件）

1、picker 从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。官方地址
2、结合官方标签手动实现三级联动

实现方案

<template>
  <view>
    <view class="g-dp-ctt-wrapper">
      <picker-view style="width: 32%; height: 240px;" :indicator-style="indicatorStyle" :value="value[0]" data-column="0" @change="changeHandler">
        <picker-view-column>
          <view class="g-dp-ctt-wp-item" v-for="(item,a) in columns[0]" :key="item.id">{{item.name}}</view>
          <view class="g-dp-ctt-wp-item"></view>
        </picker-view-column>
      </picker-view>

      <picker-view style="width: 32%; height: 240px;" :indicator-style="indicatorStyle" :value="value[1]" data-column="1" @change="changeHandler">
        <picker-view-column>
          <view class="g-dp-ctt-wp-item" v-for="(item,b) in columns[1]" :key="item.id">{{item.name}}</view>
          <view class="g-dp-ctt-wp-item"></view>
        </picker-view-column>
      </picker-view>

      <picker-view style="width: 32%; height: 240px;" :indicator-style="indicatorStyle" :value="value[2]" data-column="2" @change="changeHandler">
        <picker-view-column>
          <view class="g-dp-ctt-wp-item" v-for="(item,c) in columns[2]" :key="item.id">{{item.name}}</view>
          <view class="g-dp-ctt-wp-item"></view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>

<script>
import { getProvinceApi, getCityApi, getAreaApi } from '@/api/index.js';
export default {
  data() {
    return {
      value: [[0], [0], [0]],
      columns: [[], [], []],
      indicatorStyle: `height: ${uni.upx2px(88)}px;`,
    };
  },

  created() {
    this.getProvince();
  },

  methods: {

    changeHandler(e) {
      const { dataset, value } = e.target;
      if (dataset.column == 0) {
        if (this.columns[0][value[0]].id) {
          this.$set(this.value, dataset.column, value);
          this.$set(this.value, 1, [0]);
          this.$set(this.value, 2, [0]);
          this.getCity(this.columns[0][value[0]].id);
        }
      } else if (dataset.column == 1) {
        if (this.columns[1][value[0]].id) {
          this.$set(this.value, dataset.column, value);
          this.$set(this.value, 2, [0]);
          this.getArea(this.columns[1][value[0]].id);
        }
      } else if (dataset.column == 2) {
        this.$set(this.value, dataset.column, value);
      }
    },

    // 获取省
    getProvince() {
      getProvinceApi().then((res) => {
        this.$set(this.columns, 0, res.data);
        this.getCity(res.data[0].id);
      });
    },
    // 获取市
    getCity(province_id) {
      getCityApi({
        province_id,
      }).then((res) => {
        this.$set(this.columns, 1, res.data);
        this.getArea(res.data[0].id);
      });
    },
    // 获取区
    getArea(city_id) {
      getAreaApi({
        city_id,
      }).then((res) => {
        this.$set(this.columns, 2, res.data);
        this.loading = false;
      });
    },

    //提交按钮
    save() {
      let province = this.columns[0][this.value[0]];
      let city = this.columns[1][this.value[1]];
      let areal = this.columns[2][this.value[2]];
    },

  }
}
</script>

<style lang="scss">
picker-view-column {
    height: 480rpx !important;
}
.g-dp-ctt-wrapper {
    height: 480upx;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    .g-dp-ctt-wp-item {
        width: 100%;
        height: 88upx;
        line-height: 88upx;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 30upx;
    }
}
</style>