【鸿蒙应用ArkTS开发系列】- 云开发入门实战二 实现省市地区三级联动地址选择器组件（下）

已于 2023-11-24 11:22:41 修改
阅读量2k 收藏 21
点赞数 12
分类专栏： Harmony 文章标签： 鸿蒙原生应用 ArkTS 云开发 省市区三级联动组件 ArkUI
于 2023-11-23 19:44:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q919233914/article/details/134577844
版权

文章目录

概述

我们在前面的课程，对云开发的入门做了介绍，以及使用一个省市地区联动的地址选择器示例，为大家演示了如何创建云开发工程，以及云数据库、云函数的开发实战。如果有读者还没看过前面的这两篇文章，那在读这篇文章之前，建议先看下以下这两篇文章，之后再来阅读本篇文章，会更好理解云开发这块的内容。
《【鸿蒙应用ArkTS开发系列】- 云开发入门简介》
《【鸿蒙应用ArkTS开发系列】- 云开发入门实战二 实现省市地区三级联动地址选择器组件（上）》

那我们现在正式开始今天的课程，本次课程是 《【鸿蒙应用ArkTS开发系列】- 云开发入门实战二 实现省市地区三级联动地址选择器组件（上）》 的下篇，上篇我们完成了省市地区联动的地址选择器云工程的云数据、云函数的开发跟部署，这次的课程，我们将开发一个鸿蒙客户端，来调用云服务的API，获取地址信息数据进行展示。

通过本次课程，我们将学习到以下内容：

  1. 鸿蒙客户端如何集成AGC SDK；
  2. 鸿蒙客户端如何调用云函数获取数据；
  3. 实现省市地区联动的地址选择器组件；
  4. ArkUI @Provide、@Consume、@Watch等状态管理装饰器的使用

那下面我们直接进入本次课程的学习。按照惯例，这里先上成品效果图：

在这里插入图片描述
上面由于是用的云端地址位置数据，因此会有一个加载的过程，实际开发时，我们也可以将地址数据内置到客户端中，或者网络数据做一个缓存处理，这样用户体验会更好一些。

端云调用流程

下面我们先看下客户端跟云服务之间的一个交互流程图：
在这里插入图片描述

端侧集成AGC SDK

客户端工程应该怎么集成AGC SDK呢，这一步，我建议还是跟《【鸿蒙应用ArkTS开发系列】- 云开发入门简介》 中提到的，使用端云一体化开发目标来创建工程，这样 DevEco Studio会为端侧工程自动集成AGC相关云服务最新版本SDK。

  1. “entry/src/main/resources/rawfile/agconnect-services.json”：AGC
    SDK配置文件，内含client_secret和api_key，请妥善保管。
    在这里插入图片描述
  2. “entry/oh-package.json5”：自动引入了AGC相关云服务（认证服务、云函数、云存储）最新版本SDK，同时会自动集成端云一体化登录组件的最新SDK。
    工程同步成功后可以看到当前从ohpm仓获取的最新版本。
    在这里插入图片描述
    上图是之前创建的，现在的版本的已经有所更新，大家根据IDE实际创建的版本来。我目前工程集成的SDK是下面这样的
    在这里插入图片描述
    如果是已经存在的端侧工程，那需要按照官网的AGC SDK 集成方式集成，包括从AppGallery-Connect 中下载项目agconnect-services.json文件导入到端侧工程，以及对应的AGC SDK库进行 ohpm依赖安装。
    在这里插入图片描述官网 HarmonyOS使用入门（ArkTS API9及以上） 对鸿蒙集成AGC服务 讲解的很详细，这里就不过多赘述，大家直接看官方文档即可。

做完前期工作，那我们开始进入本篇课程的重点内容，开发一个省市地区联动的地址选择器组件。

端侧省市地区联动的地址选择器组件开发

创建省市数据模型

打开DevEco Studio，在"Application-> entry -> src -> main -> ets 下创建一个bean目录，用于存放省市数据的数据模型类，在目录中创建ProvinceBean（省）、CityBean（市）、DistrictBean（区县），

在这里插入图片描述

完成代码如下：

ProvinceBean.ts

/**
 * 省份信息
 */
export class ProvinceBean {
  public id: number;
  public code: string;
  public label: string;
}

CityBean.ts

/**
 * 城市信息
 */
export class CityBean {
  public id: number;
  public province_code: string;
  public code: string;
  public label: string;
}

DistrictBean.ts

/**
 * 区县信息
 */
export class DistrictBean {
  public id: number;
  public city_code: string;
  public code: string;
  public label: string;
}

创建省市地区视图UI子组件

打开DevEco Studio，在"Application-> entry -> src -> main -> ets "目录下新建一个"component"文件夹来存放省份UI子组件、城市UI子组件、区县UI子组件。
在这里插入图片描述
在component目录上右键，点击New ->ArkTS File 菜单， 创建三个UI子组件（ProvinceComponent、CityComponent、DistrictComponent）
在这里插入图片描述
完整代码如下：

ProvinceComponent.ets

import agconnect from '@hw-agconnect/api-ohos';
import "@hw-agconnect/function-ohos";

import { ProvinceBean } from '../bean/ProvinceBean'
import { Log } from '../common/Log';

@Component
export struct ProvinceComponent {
  @State mProvinceData: ProvinceBean[] = [];
  @Consume currentProvince: ProvinceBean;

  aboutToAppear() {
    this.callFunction();
  }

  build() {
    Column() {

      Text('省份')
        .width('100%')
        .height(50)
        .fontSize(20)
        .fontWeight(500)
        .textAlign(TextAlign.Center)
        .border({
          color: '#e2e2e2',
          width: { bottom: 1 }
        })

      Column() {

        if (this.mProvinceData.length === 0) {

          Text('加载中').fontSize(20)

        } else {
        
          List({ space: 10, initialIndex: 0 }) {
            ForEach(this.mProvinceData, (item: ProvinceBean) => {
              ListItem() {
                Text(item.label)
                  .width('100%')
                  .height(50)
                  .fontSize(20)
                  .textAlign(TextAlign.Center)
              }
              .backgroundColor(this.currentProvince?.code === item.code ? '#c8aaf4fc' : Color.Transparent)
              .onClick(() => {
                this.currentProvince = item;
              })
            }, item => JSON.stringify(item))
          }
          .width('100%')
          .height('100%')
          .divider({ strokeWidth: 1, color: "#e2e2e2", startMargin: 5, endMargin: 5 })
        }
      }
      .backgroundColor(Color.White)
      .border({
        color: '#e2e2e2',
        width: { right: 0.5 }
      })
      .width('100%')
      .layoutWeight(1)
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
  }

  callFunction() {
    agconnect.instance().init(getContext(this));
    let functionCallable = agconnect.function().wrap("province-query-$latest");
    let params = {};
    functionCallable.call(params).then((ret: any) => {
      Log.info("Functions", "Cloud Function Called, Returned Value: " + JSON.stringify(ret.getValue()));
      this.mProvinceData = ret.getValue().result;
      if (this.mProvinceData.length > 0) {
        this.currentProvince = this.mProvinceData[0];
      }
    }).catch((error: any) => {
      Log.error("Functions", "Error - could not obtain cloud function result. Error Detail: " + JSON.stringify(error));
    });
  }
}

CityComponent.ets

import agconnect from '@hw-agconnect/api-ohos';
import { CityBean } from '../bean/CityBean';
import { ProvinceBean } from '../bean/ProvinceBean';
import { Log } from '../common/Log';

@Component
export struct CityComponent {
  @State mTip: string = ''
  @State mCityData: CityBean[] = [];
  @Consume @Watch('onProvinceChange') currentProvince: ProvinceBean;
  @Consume currentCity: CityBean;

  build() {
    Column() {

      Text('城市')
        .width('100%')
        .height(50)
        .fontSize(20)
        .fontWeight(500)
        .textAlign(TextAlign.Center)
        .border({
          color: '#e2e2e2',
          width: { bottom: 1 }
        })

      Column() {

        if (this.mCityData.length === 0) {

          Text(this.mTip).fontSize(20)

        } else {

          List({ space: 10, initialIndex: 0 }) {
            ForEach(this.mCityData, (item: CityBean) => {
              ListItem() {
                Text(item.label)
                  .width('100%')
                  .height(50)
                  .fontSize(20)
                  .textAlign(TextAlign.Center)
              }
              .backgroundColor(this.currentCity?.code === item.code ? '#c8aaf4fc' : Color.Transparent)
              .onClick(() => {
                this.currentCity = item;
              })
            }, item => JSON.stringify(item))
          }
          .width('100%')
          .height('100%')
          .divider({ strokeWidth: 1, color: "#e2e2e2", startMargin: 5, endMargin: 5 })
        }
      }
      .backgroundColor(Color.White)
      .border({
        color: '#e2e2e2',
        width: { right: 0.5 }
      })
      .width('100%')
      .layoutWeight(1)
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
  }

  onProvinceChange() {
    Log.info("Functions", "onProvinceChange");
    this.mCityData.splice(0, this.mCityData.length);
    if (this.currentProvince) {
      this.mTip = '加载中';
      this.callFunction(this.currentProvince.code);
    }
  }

  callFunction(provinceCode: string) {
    agconnect.instance().init(getContext(this));
    let functionCallable = agconnect.function().wrap("city-query-$latest");
    let params = { "code": provinceCode };
    Log.info("Functions", "Cloud Function Called, body: " + JSON.stringify(params));
    functionCallable.call(params).then((ret: any) => {
      Log.info("Functions", "Cloud Function Called, Returned Value: " + JSON.stringify(ret.getValue()));
      this.mCityData = ret.getValue().result;
      if (this.mCityData.length > 0) {
        this.currentCity = this.mCityData[0];
      }
    }).catch((error: any) => {
      Log.error("Functions", "Error - could not obtain cloud function result. Error Detail: " + JSON.stringify(error));
    });
  }
}

DistrictComponent.ets

import agconnect from '@hw-agconnect/api-ohos';
import { CityBean } from '../bean/CityBean';
import { DistrictBean } from '../bean/DistrictBean';
import { Log } from '../common/Log';
import { ProvinceBean } from '../bean/ProvinceBean';

@Component
export struct DistrictComponent {
  @State mTip: string = ''
  @State mDistrictData: DistrictBean[] = [];
  @Consume @Watch('onProvinceChange') currentProvince: ProvinceBean;
  @Consume @Watch('onCityChange') currentCity: CityBean;
  @Consume currentDistrict: DistrictBean;

  build() {
    Column() {

      Text('区县')
        .width('100%')
        .height(50)
        .fontSize(20)
        .fontWeight(500)
        .textAlign(TextAlign.Center)
        .border({
          color: '#e2e2e2',
          width: { bottom: 1 }
        })

      Column() {

        if (this.mDistrictData.length === 0) {

          Text(this.mTip).fontSize(20)

        } else {

          List({ space: 10, initialIndex: 0 }) {
            ForEach(this.mDistrictData, (item: DistrictBean) => {
              ListItem() {
                Text(item.label)
                  .width('100%')
                  .height(50)
                  .fontSize(20)
                  .textAlign(TextAlign.Center)
              }
              .backgroundColor(this.currentDistrict?.code === item.code ? '#c8aaf4fc' : Color.Transparent)
              .onClick(() => {
                this.currentDistrict = item;
              })
            }, item => JSON.stringify(item))
          }
          .width('100%')
          .height('100%')
          .divider({ strokeWidth: 1, color: "#e2e2e2", startMargin: 5, endMargin: 5 })
        }
      }
      .backgroundColor(Color.White)
      .border({
        color: '#e2e2e2',
        width: { right: 0.5 }
      })
      .width('100%')
      .layoutWeight(1)
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
  }

  onProvinceChange() {
    this.mDistrictData.splice(0, this.mDistrictData.length);
  }

  onCityChange() {
    Log.info("Functions", "onCityChange");
    this.mDistrictData.splice(0, this.mDistrictData.length);
    if (this.currentCity) {
      this.mTip = '加载中';
      this.callFunction(this.currentCity.code);
    }
  }

  callFunction(cityCode: string) {
    agconnect.instance().init(getContext(this));
    let functionCallable = agconnect.function().wrap("districts-query-$latest");
    let params = { "code": cityCode };
    Log.info("Functions", "Cloud Function Called, body: " + JSON.stringify(params));
    functionCallable.call(params).then((ret: any) => {
      Log.info("Functions", "Cloud Function Called, Returned Value: " + JSON.stringify(ret.getValue()));
      this.mDistrictData = ret.getValue().result;
      if (this.mDistrictData.length > 0) {
        this.currentDistrict = this.mDistrictData[0];
      }
    }).catch((error: any) => {
      Log.error("Functions", "Error - could not obtain cloud function result. Error Detail: " + JSON.stringify(error));
    });
  }
}

三个UI子组件的UI样式基本一致，功能也是基本一致，大家也可以进行代码封装重构，基于通用模型抽取成一个模板组件，这里只演示功能，就不过多赘述。在这里我们就拿城市列表视图 CityComponent.ets来进行代码的讲解。

1、首先我们定义了四个状态变量。

  @State mTip: string = ''
  @State mCityData: CityBean[] = [];
  @Consume @Watch('onProvinceChange') currentProvince: ProvinceBean;
  @Consume currentCity: CityBean;
  • mTip 用于显示加载中提示语
  • mCityData 是城市列表的数据源
  • currentProvince 是当前选中的省份信息对象（我们基于该对象的省份编码来查询城市列表）。
  • currentCity 是记录当前选中的城市。

这里currentProvince 、currentCity 使用**@Consume装饰**，用于跟页面中 @Provide装饰 的状态变量（currentProvince 、currentCity）做双向状态同步，这样Page页面可以拿到当前选中的省份、选中的城市的数据，其他的子组件之间也可以进行数据共享。

currentProvince 同时还用了 @Watch(‘onProvinceChange’)装饰，因为城市列表视图 CityComponent需要实时监听切换省份的事件，来动态调用云函数接口获取对应省份的城市数据，因此这里使用@Watch对currentProvince数据进行观察，如果省份视图子组件中选中的省份有所改变，onProvinceChange方法将会接收到回调。

2、build 方法

UI视图绘制这里，我们根据城市数据源的数据情况，如果是没数据，就显示mTip ，如果mCityData 有数据，就使用一个列表进行数据展示

2、onProvinceChange方法

onProvinceChange() {
    Log.info("Functions", "onProvinceChange");
    this.mCityData.splice(0, this.mCityData.length);
    if (this.currentProvince) {
      this.mTip = '加载中';
      this.callFunction(this.currentProvince.code);
    }
  }

当选中的省份数据有变动时，onProvinceChange会被触发，我们在该方法中将mCityData 数据源清空，给mTip 设置一个等待提示语，然后调用callFunction 方法请求云函数根据省份编码查询城市列表数据。因为currentProvince 是跟Page页面和省份子组件是进行数据双向同步的，因此onProvinceChange触发的时候this.currentProvince.code 也是能拿到最新的切换后的省份编码。

3、callFunction方法
这里我们重点讲下这个方法，这关系到云函数的调用。

 callFunction(provinceCode: string) {
    agconnect.instance().init(getContext(this));
    let functionCallable = agconnect.function().wrap("city-query-$latest");
    let params = { "code": provinceCode };
    Log.info("Functions", "Cloud Function Called, body: " + JSON.stringify(params));
    functionCallable.call(params).then((ret: any) => {
      Log.info("Functions", "Cloud Function Called, Returned Value: " + JSON.stringify(ret.getValue()));
      this.mCityData = ret.getValue().result;
      if (this.mCityData.length > 0) {
        this.currentCity = this.mCityData[0];
      }
    }).catch((error: any) => {
      Log.error("Functions", "Error - could not obtain cloud function result. Error Detail: " + JSON.stringify(error));
    });
  }
  • 拿到agconnect实例并进行初始化
  • 通过 agconnect.function().wrap(“city-query-$latest”) 拿到云函数对象控制器，这里具体要调用哪一个云函数，在wrap方法中采用“云函数名称-版本号” 定义，latest 是最新版本。
  • 使用functionCallable.call(params)触发请求，params是body，数据类型是JSON对象
  • 使用then异步获取返回的数据，通过ret.getValue()获取数据
  • 使用catch处理异常错误情况

三个UI视图子组件开发完毕，下面我们创建个Page页面将三个子组件整合起来显示。

创建页面UI视图Page文件

1、打开DevEco Studio，在"Application-> entry -> src -> main -> ets -> pages"目录下新建一个"AreaPage.ets"文件来实现省市地区联动地址选择器功能的页面。
在这里插入图片描述
2、配置页面路由
由于模板已经创建了一个main_pages.json文件进行统一的页面管理，所以我们需要将新建的页面注册在"Application-> entry -> src -> main -> resources -> base ->profile -> main_pages.json"文件中。
3、 在EntryAbility.ts 类中onWindowStageCreate 方法中， 将

windowStage.loadContent('pages/Index', (err, data) => {}）

中的第一个参数，修改为’pages/AreaPage’

windowStage.loadContent('pages/AreaPage', (err, data) => {}）

4、在AreaPage界面放三个控件：一个省份视图子组件显示省份列表，一个城市视图子组件显示城市列表，并与选择的省份进行数据联动，一个区县视图子组件显示区县列表，并与选择的城市进行数据联动，完整示例代码如下。

import { CityBean } from '../bean/CityBean'
import { DistrictBean } from '../bean/DistrictBean'
import { ProvinceBean } from '../bean/ProvinceBean'
import { CityComponent } from '../component/CityComponent'
import { DistrictComponent } from '../component/DistrictComponent'
import { ProvinceComponent } from '../component/ProvinceComponent'

@Entry
@Component
export struct AreaPage {
  @Provide currentProvince: ProvinceBean = null;
  @Provide currentCity: CityBean = null;
  @Provide currentDistrict: DistrictBean = null;

  build() {
    Row() {
      ProvinceComponent().width('30%')
      CityComponent().width('35%')
      DistrictComponent().width('35%')
    }
    .height('100%')
  }
}

这里我们定义了三个状态变量，存储当前选择的省份、选择的城市、选择的区县这三个对象，并使用@Provide装饰器，这样@Provide装饰的状态变量与子组件的@Consume装饰器装饰的同名状态变量，会实现一个数据状态双向绑定。具体如下图：

AreaPage-currentProvince分别与ProvinceComponent-currentProvince 、 CityComponent-currentProvince 直接建立数据状态双向绑定，ProvinceComponent-currentProvince 与CityComponent-currentProvince 间接建立数据状态双向绑定。
在这里插入图片描述
这样，我们这个省市区县联动的地址选择器功能就完成了。

打包测试

1.DevEco Studio菜单选择“File -> Project Structure”，在“Project Structure”界面导航选择“Project”，选择“Signing Configs”页签。

2.勾选“Automatically generate signature” ，自动签名完成后点击“OK”。
在这里插入图片描述
3.将应用服务推送到支持API 9及以上版本的手机。

4.显示效果如下：
在这里插入图片描述
5.控制台日志如下：
在这里插入图片描述

总结

通过《【鸿蒙应用ArkTS开发系列】- 云开发入门实战三 实现省市地区三级联动地址选择器组件》上下篇这两篇文章， 你应该已经成功地掌握使用HarmonyOS云开发能力开发了一个应用，学会如何使用云数据库、云函数，实现端、云的交互。

感谢阅读，后续有疑问或者其他问题，可以在评论区留言交流。

小枫_S
关注
  • 12
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
【鸿蒙原生应用】ArkTS语言基础类库
11-20
1. ArkTS组件公共样式提取方法@Styles @Extend与@Builder的使用介绍2. ArkTS异步并发Promise，async/await使用介绍3. ArkTS多线程并发TaskPool与Worker简介4. ArkTS常用数据容器及XML相关接口简介
HarmonyOS NEXT应用开发案例——二级联动
maniuT的博客
03-08 1091
本示例主要介绍了List组件实现二级联动（Cascading List）的场景。该场景多用于短视频中拍摄风格的选择、照片编辑时的场景的选择。
鸿蒙（ArkUI）开发：实现二级联动
2301_76813281的博客
01-25 1368
列表的二级联动（Cascading List）是指根据一个列表（一级列表）的选择结果，来更新另一个列表（二级列表）的选项。这种联动可以使用户根据实际需求，快速定位到想要的选项，提高交互体验。例如，短视频中拍摄风格的选择、照片编辑时的场景的选择，本文即为大家介绍如何开发二级联动。
鸿蒙开发-ArkTS 语言（三）— 状态管理
m0_73838866的博客
02-28 972
View(UI)：基于UI描述渲染得到用户界面。State：指驱动视图更新的数据(被装饰器标记的变量)。
【鸿蒙应用ArkTS开发系列】- 云开发入门实战二 实现省市地区三级联动地址选择器组件（上）
枫的专栏
11-22 2059
通过本次课程，我们将学习怎么使用云端一体化开发模板来创建云开发工程，以及如何使用云工程进行云数据库创建、云函数创建和调用。那下面我们直接进入本次课程的学习。使用云端一体化开发模板创建项目工程这块内容，在上一篇文章《【鸿蒙应用ArkTS开发系列】- 云开发入门简介》中已经进行了讲解，这块这里就不在过多赘述，没有看过的同学可以点击这里: 链接 查阅创建完毕，整体的工程目录结构如下：接下来，我们展开CloudProgram 这个项目，开始进行云数据开发。
OpenHarmony开发实战：二级联动（ArkTS），2024年最新腾讯面试题库
最新发布
2401_84166396的博客
04-13 614
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
鸿蒙实战：HarmonyOS NEXT【城市选择】
2301_76813281的博客
02-29 379
本示例介绍城市选择场景的使用：通过[AlphabetIndexer]实现首字母快速定位城市的索引条导航。
vue + element cascader级联选择器编写城市选择器
username_xu的博客
05-15 4802
需求： 1、城市选择 2、城市输入 实现： html <el-cascader :options="options" change-on-select filterable @change="handleChange"> </el-cascader> js import cities from '@/common/c...
级联选择器（el-cascader）动态加载（lazyLoad）实现省市区三级选择
热门推荐
yuan
03-18 1万+
开开心心工作，兢兢业业生活 1. 需求：实现一个省市区的级联选择器，点击一级，动态加载下一级 那好，我们找个轮子 2. 他山之石（找个轮子） Element UI 中国省市区级联数据 安装： npm install element-china-area-data -S 使用： <template> <div id="app"> <el-cascader size="large" :options="options" ..
【HarmonyOS】鸿蒙开发之ArkTs初步认识——第2.1章
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
02-02 1140
沉默小管 鸿蒙开发之ArkTs初步认识
ArkTS - 数据持久化
m0_56308072的博客
01-08 1695
应用数据持久化，是指应用将内存中的数据通过文件或数据库的形式保存到设备上。内存中的数据形态通常是任意的数据结构或数据对象，存储介质上的数据形态可能是文本、数据库、二进制文件等。持久（Persistence），即把数据（如中的对象）保存到可永久保存的存储设备中（如磁盘）。持久化的主要应用是将内存中的数据存储在关系型的数据库中，当然也可以存储在磁盘文件中、XML数据文件中等等。HarmonyOS标准系统支持典型的存储数据形态，包括用户首选项、键值型数据库、关系型数据库。
微信小程序实现选择地址省市区三级联动
10-15
主要为大家详细介绍了微信小程序实现选择地址省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uni-app实现省市区三级联动的js文件
10-22
本文件是uni-app实现省市区三级联动中的data.js文件，详情见博客：https://whhtjl.blog.csdn.net/article/details/109216246
asp.net 地区选择器省市区三级联动程序源码.zip
01-27
【程序老媛出品，必属精品，亲测校正，质量保证】 资源名：asp.net 地区选择器省市区三级联动程序源码.zip 资源类型：程序源代码 源码说明： 基于asp.net 的省市县三级联动的地区选择器 很适合用于用户注册时选择所在地区场景 代码完整 注释详细很适合学习借鉴 适合人群：新手及有一定经验的开发人员
云开发入门实战二 实现城市多级联动Demo-云工程源码
11-22
使用鸿蒙ArkTS Stage 模式 端云一体化模板开发的实现城市多级联动Demo 云工程项目代码，欢迎下载学习。通过该工程Demo以及相关文章学习，基本可以掌握云数据库、云函数的开发跟部署。 Demo工程仅供学习使用，切勿用于商业活动，违者后果自负。省市地区数据来源网络，提供学习使用，不保证数据准确性，切记！
vue.js模仿京东省市区三级联动的选择组件实例代码
10-18
选择省市区是我们大家在填写地址的时候经常会遇到的一个功能，下面这篇文章主要给大家介绍了关于利用vue.js模仿实现京东省市区三级联动选择组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴...
js实现移动端省市区三级联动选择器效果
08-12
实现移动端省市区三级联动选择器，使用js实现三级联动的效果
微信小程序-省市县三级联动，带有自定义地区码(源代码+截图)
06-19
微信小程序-省市县三级联动，带有自定义地区码(源代码+截图)微信小程序-省市县三级联动，带有自定义地区码(源代码+截图)微信小程序-省市县三级联动，带有自定义地区码(源代码+截图)微信小程序-省市县三级联动，带有...
uniapp使用uview组件实现省市区三级联动
06-29
uniapp使用uview组件实现省市区三级联动； 文件下载后，需要在项目中引入uview组件方可使用； 数据附带在文件中
如何使用vue 城市选择器的 element-china-area-data插件来实现省市县三级联动
05-30
使用 `element-china-area-data` 插件可以非常方便地实现省市县三级联动选择器。下面是具体的实现步骤： 1. 安装 `element-china-area-data` 插件 使用 npm 安装 `element-china-area-data` 插件： ```bash npm install element-china-area-data --save ``` 2. 引入 `element-china-area-data` 插件 可以在 `main.js` 文件中引入 `element-china-area-data` 插件： ```javascript import Vue from 'vue' import Element from 'element-ui' import chinaAreaData from 'element-china-area-data' Vue.use(Element) Vue.prototype.$chinaAreaData = chinaAreaData ``` 3. 创建省市县三级联动选择器 使用 `el-cascader` 组件创建省市县三级联动选择器，同时使用 `element-china-area-data` 插件提供的数据源： ```html <template> <el-cascader v-model="selected" :options="options" :props="{ value: 'name', label: 'name', children: 'children' }" change-on-select ></el-cascader> </template> <script> export default { data() { return { selected: [], options: this.$chinaAreaData } } } </script> ``` 其中，`options` 属性绑定了 `$chinaAreaData` 对象，`props` 属性设置了数据源的字段名，`change-on-select` 属性表示选择任意一级选项后立即显示结果。 这样就可以创建一个简单的省市县三级联动选择器了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值