编写antd的Cascader 级联选择组件市级地区数据

最新推荐文章于 2024-07-19 12:07:10 发布

皮豪kbug

最新推荐文章于 2024-07-19 12:07:10 发布

阅读量51

点赞数

本文链接：https://blog.csdn.net/pphboy/article/details/133010999

版权

这篇博客介绍了中国地区数据的结构，如Zhejiang省下的Hangzhou市及其子区域WestLake。数据来源于github上的china-area-data项目v5版本，并提供了city.json文件的链接，适合用于地理信息相关的前端组件开发。

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

下面是该组件的使用数据的格式

options: [
 {
  value: 'zhejiang',
  label: 'Zhejiang',
  children: [
    {
      value: 'hangzhou',
      label: 'Hangzhou',
      children: [
        {
          value: 'xihu',
          label: 'West Lake',
        },
      ],
    },
  ],
},
],

https://github.com/airyland/china-area-data
数据来源于此项目的v5版本

下面是文件的地址,city.json文件是对应此组件的https://gitee.com/pphboy/citys

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

皮豪kbug

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

AntD Cascader级联选择全国省市区级联

万能小灯泡的博客

06-02

1万+

AntD 省市区级联效果在项目中使用AntD的Cascader实现级联选实现效果如下：具体实现代码如下： import React, { Component } from 'react'; import { withRouter } from 'react-router-dom'; import { observer } from 'mobx-react'; import...

antd省市区级联

徐同保的专栏

07-08

886

import React, { useState } from 'react' import { Cascader } from 'antd' import options from '../../utils/cities' export default function AreaCascader({ value = [], onChange, getPopupContainer }) { const [cascader, setCascader] = useState([]) ...

参与评论您还未登录，请先登录后发表或查看评论

react层级联动，城市级联选择，多级联动组件

youjia727的博客

05-24

1205

react层级联动，城市级联选择，多级联动组件

vue 省市区三级联动 antd 级联组件 Cascader

希文Gershwin

01-08

6891

需求与功能该功能实现了中国内的省市区的三级联动，基于 antd-vue 中的 Cascader 做的组件，支持原有的所有功能效果展示支持联想搜索支持显示部分省份例子（本例子是基于 antd 做的，在 element-ui，或者是 iview 中，同样适用） <template> <AreaCascader v-model="data1" /> </template> API 下面只列出了在本插件中二次封装添加的新字段，和部分原有 antd-v

基于 antd 的 Cascader 封装的省市区街道地区下拉选择器

weixin_52014110的博客

08-23

3103

根据 antd 的 Cascader 和 Select 组件进一步封装而成的省市区街道下拉选择器组件。这里用到的技术栈是：react，hooks 和 ts。

react +Antd Cascader级联选择使用接口数据渲染

weixin_59525879的博客

08-23

945

2使用自定义Cascader级联选择组件。1获取接口数据并将数据转换成树形数组。

antd Cascader 级联多选全路径展示

2302_76925238的博客

07-19

638

【代码】antd Cascader 级联多选全路径展示。

antd Cascader级联菜单无法赋值回显问题

一枚不断学习的小码农一枚~

11-03

854

Cascader级联数据是服务端返回然后自己处理过的，使用了cascader的fileNames属性重置字段名，最后发现服务端回传的数据无法赋值回显在组件上，自己试了半天，还以为是数据问题或者是字段问题，最后发现是赋值的数据格式和级联数据的数据格式不一致的问题，导致无法赋值成功……然后查看详情时服务端又将此字符值回传线我，我再使用split方法解析成数组，自动就会解析将值解析成字符串格式。真的太无语了，总犯这种低级错误，但是我怕有同学和我一样，所以还是放上来吧，万一有人看到呢……

antd 级联选择 Cascader

qq_46472106的博客

03-08

1796

因为一般接口返回的值都叫name和code，但是antd的级联选择中指定了属性名叫 label和value，所以我们需要改变参数名，将接口的返回值传入下面函数 function convertKey(arr){ let tempString = JSON.stringify(arr); let jsonObject = {name:"label",code:"value"} for(var key in jsonObject ){ var reg = `/"${key}":/

React Antd Cascader 组件「级联选择框」实战使用总结（一）

Constantiny的博客

05-08

2520

React Pro components Cascader 级联选择框实战使用总结设置多选 mutiple 报错问题等

element-china-area-data：Element UI && antd Cascader级联选择器中国省市区三级，二级联动optiondata

02-06

Element UI中国省市区级联数据安装 npm install element-china-area-data -S 在线示例使用 import { provinceAndCityData , regionData , provinceAndCityDataPlus , regionDataPlus , CodeToText , TextToCode }...

react antd3 级联Cascader初始值设置

m0_46313328的博客

09-29

1831

<FormItem {...formItemLayout} label='安装位置' > {form.getFieldDecorator('address', { initialValue: ['zhejiang','hangzhou','xihu'], rules: [{ required: true, message: '安装位置不能为空！' }], })( <Cascader options={this.options} onChange

antdv a-cascader级联选择动态加载及回显

qq_38019414的博客

06-15

6144

产品要求只要级联选择面板，还好antd里面有个自定义显示的例子。

基于FPGA的智能车牌检测系统设计与实现

11-08

内容概要：本文介绍了一种基于FPGA的智能车牌检测系统。该系统采用了OV5640摄像头进行图像采集，通过FPGA集成化开发环境进行图像处理，主要包括图像格式转换、图像灰度化、图像增强、边缘检测、腐蚀膨胀、投影定位等技术步骤。该系统能够在复杂环境中快速实现车牌的图像采集及定位，提高了车牌检测的效率和准确性。适合人群：具备一定嵌入式系统和图像处理基础的研究人员和技术人员。使用场景及目标：适用于智慧交通管理系统，尤其是停车场、高速公路、智能制造等领域，主要用于实现实时的车牌检测与识别。其他说明：系统采用Sobel算子进行边缘检测，中值滤波进行图像增强，投影定位确定车牌位置，整体处理效率较高，适用于复杂光照条件下的车牌检测。

【java毕业设计】springbootJava学生选课系统(springboot+vue+mysql+说明文档).zip

11-08

项目经过测试均可完美运行！环境说明：开发语言：java 框架：ssm jdk版本：jdk1.8 数据库：mysql 5.7+ 数据库工具：Navicat11+ 管理工具：maven 开发工具：idea/eclipse 部署容器：tomcat7+

JDK-API-1-6-zh-CN

11-08

JDK API 1.6 中文版，附使用说明

【java毕业设计】springbootJava校车管理信息系统(springboot+vue+mysql+说明文档).zip

11-08

resnet模型-python语言pytorch框架训练识别动物-不含数据集图片-含逐行注释和说明文档.zip

最新发布

11-08

本代码是基于python pytorch环境安装的。下载本代码后，有个环境安装的requirement.txt文本首先是代码的整体介绍总共是3个py文件，十分的简便本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。运行01生成txt.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集运行02CNN训练数据集.py,会自动读取txt文本内的内容进行训练，这里是适配了数据集的分类文件夹个数，即使增加了分类文件夹，也不需要修改代码即可训练训练过程中会有训练进度条，可以查看大概训练的时长,每个epoch训练完后会显示准确率和损失值训练结束后，会保存log日志，记录每个epoch的准确率和损失值最后训练的模型会保存在本地名称为model.ckpt 运行03pyqt界面.py，就可以实现自己训练好的模型去识别图片了

仿iphone的listview下拉更新.zip

11-08

内容概要：本资源聚焦 Android 编程实战，包含毕业设计示例、完整的 Android 项目源码及文档分享。采用 MVC 模式进行架构设计，结合 JSP 技术与 SQL Server 2000 数据库管理系统，实现高效的 Android 应用开发。适用人群：Android 开发初学者、计算机专业学生进行毕业设计参考、希望提升 Android 开发技能的程序员。实用场景及目标：适用于开发各类 Android 应用项目，帮助开发者快速构建稳定、功能丰富的应用程序，同时为毕业设计提供优质的模板和思路。说明：资源提供了详细的代码注释和文档说明，方便学习者理解和上手，助力提升 Android 开发能力和项目实战经验。

react antd Cascader组件省市区级联懒加载

06-09

Cascader组件是一个级联选择器，可以根据选项的值进行级联选择。在这个组件中，你可以传入省市区数据，并且设置级联模式为lazy，即懒加载。在懒加载模式下，只有当用户点击上级选项时，才会加载下级选项。这样可以...