符合antd规则省市区json文件

最新推荐文章于 2024-08-08 07:07:06 发布
最新推荐文章于 2024-08-08 07:07:06 发布
阅读量575 收藏 10
点赞数 10
文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Xyt1737/article/details/134740950
版权

其实还有优化点，需要给每条数据有个key值！

Xyt1737
关注
React+Antd实现省、市区级联下拉多选组件（支持只选省不选市）
陌上花开然不归矣
02-06 2585
react+antd+实现省、市区级联下拉多选组件
ant design/element-ui通用省市区组件通用json
05-12
用 import citys from '../citys'; 的方式引入，也可以直接改成.json后缀名的方式，改的话记得里面也要改成json的格式，而不是es6导出的方式 遍历数据的方法（react）: for (let i = 0; i < citys.length; i++) { if (event.length >= 0 && citys[i].value == event[0]) { this.setState({ province: citys[i].label });//省 if (citys[i].children != undefined) { for (let j = 0; j < citys[i].children.length; j++) { if (event.length >= 1 && citys[i].children[j].value == event[1]) { this.setState({ city: citys[i].children[j].label });//市 if (citys[i].children[j].children != undefined) { for (let k = 0; k < citys[i].children[j].children.length; k++) { if (event.length >= 2 && citys[i].children[j].children[k].value == event[2]) { this.setState({ districe: citys[i].children[j].children[k].label }, console.log(this.state.province + this.state.city + this.state.districe));//区 } } } } } } } } vue的我不会，但也差不多改一下setState的方式就行
react+antd省市区
WEBLYP的博客
09-13 642
react使用antd级联实现省市区选择 一、找个数据数据 例：https://gitee.com/gaohuazi/china_regions/tree/master/json 二、项目中引入数据和 Cascader 1、import region from ‘region.json’ 2、import { Cascader } from ‘antd’; 三、自定义字段名 <Cascader fieldNames={{ label: 'name', value: 'code' }}//自定义字段名
省市区三级联动数据 json vue iview vant ele antd
06-10
{ "children":[ { "children":[ { "children":[], "label":"东城区", "pid":"35", "value":"379" }, { "children":[], "label":"西城区", "pid":"35", "value":"380" },]}]}
antd select实现省市级联动完整步骤（包含读取json数据）
蓝枫秋千的踩坑记录
04-16 5421
去这里拷贝一份json数据 这个字段结构也是写好了的，符合antd字段要求 直接拷贝数组（不要前面的const和options和=号），然后建立一个json文件 如果不想通过json读取数据，也可以直接拷贝整个文件内容（包括const options =）部分 通过import的方式导入json文件 注意：如果使用的是ts这里会报警告Cannot find module 'ech...
antDesign vue 省市区级联，附json文件
zhuangjiajia09的专栏
01-06 2093
1. 首先选择级联选择组件 <a-cascader v-model="formData.orderCity" class="item-r2" :field-names="{ label: 'label', value: 'label', children: 'children', }"
antd picker组件 全国省市县数据
09-18
最新的全国省市县数据 数据格式[{ "label": "北京市", "value": "110000", "children": [{ "label": "北京市", "value": "110100", "children": [{ "label": "东城区", "value": "110101", "children": [] }] }] }]
ant Design 省市级联数据
木白的博客
08-08 5611
最近在用react+antd写东西  然后突然发现antd里面的省市级数据不全 之后就手撸了一个 var cityData = [ { "label":"北京市", "value":"110000", "children": [ { "label": "北京市", "value&quo
全国省市区三级联动json数据
11-17
标题中的“全国省市区三级联动json数据”是指中国省级、市级和区级行政区划的数据，组织成JSON（JavaScript Object Notation）格式，这种格式通常用于Web开发中的数据交换。JSON是一种轻量级的数据交换格式，易于人...
省市区3级联动数据ant design
09-07
省市区3级联动数据，包含港澳台下的市区，可用于 ant design 下的各个组件库
vue-》世界国家 省市，三级联动，vue,基于mint-ui,中国 省市县三级联动
02-13
开发者可以解析这个JSON文件，将其转化为Vue可以处理的数据模型，以便在前端展示。 首先，我们需要了解Vue组件化思想。在这个项目中，我们可以创建三个独立的组件：`CountrySelect`（国家选择）、`ProvinceSelect`...
Vue2中省市区三级联动json
06-06
这个直接是个data，放入你的vue2项目中即可。（因为我的项目是用的vue2，所以，其他的属性跟博客内容是吻合的。请配合博客再下载此json）
Antd-rules-自定义校验规则
吕氏春秋i
03-23 3250
公司UI出了一个表单提交的规则校验效果需要自定义rules才可以实现只要输入错误就提示红色边框 并且不可以提交如何实现？##解决antd官方给了案例 自定义校验规则实现如下：1，需要自定义rules2，自定义validator3，填写你的规则方法。
vue 2.0 加载本地json 数据
weixin_34026276的博客
01-11 206
转载于:https://www.cnblogs.com/xzma/p/8268386.html
antd 中的cascader实现市镇村多级联动选择,以及后端返回的数组数组格式等问题
2301_76634106的博客
10-08 577
后端接口格式，可以通过fieldNames进行自定义。
中国省市区数据——china-area-data 教程
gitblog_00726的博客
08-08 2303
中国省市区数据——china-area-data 教程 项目地址:https://gitcode.com/gh_mirrors/ch/china-area-data 1. 项目介绍 china-area-data 是一个用于存储中国所有省、市、区县的开源数据集，提供JSON格式的数据文件。该项目主要用于处理地理信息相关的前端或后端应用，例如地址选择器、地图应用等。它包含了从省级到县级的最新行政区域...
react项目封装省市区选择组件
情非得已小猿猿
10-08 3206
一、地址选择器组件封装 1、引入antd的Select组件 import React, { Component } from "react"; import { Select } from "antd"; import { api } from '../api/modules/services/src/api'; const { Option } = Select; 2、定义组件Props & States onSelectData 最后选中后的所有值 provinceList 省的数据 c
基于 antd 的 Cascader 封装的省市区街道地区下拉选择器
weixin_52014110的博客
08-23 3439
根据 antd 的 Cascader 和 Select 组件进一步封装而成的省市区街道下拉选择器组件。这里用到的技术栈是：react，hooks 和 ts。
vue+antdv省市区联动组件封装
V_AYA_V的博客
08-17 1211
省市区联动作为基础组件在各项目中都有使用，抽空封装一下。省市区JSON文件保存在本地，组件下级数据根据上级数据联动，支持删除叶子层级数据。效果图如下： <template> <div class="regionselect-container"> <a-form-model layout="inline" :model="form" :label-col="labelCol" :wrapper-col="wrap.
vue3 AntdVue 省市区三级下拉框
最新发布
10-09
AntdVue是Vue.js生态中集成Ant Design UI组件库的一个方案，它提供了一种简单的方式来在Vue项目中使用Ant Design的设计和功能。其中，涉及到省市区三级联动的下拉框通常指的是`<Select>`组件结合`<Option>`和嵌套`<Select>`来实现的地区选择功能。 在AntdVue中，你可以这样做： 1. 首先，导入需要的组件： ```javascript import { Select } from 'ant-design-vue'; ``` 2. 创建一个数据结构来存储地区数据，通常包含父级、子级和值： ```javascript const provinces = [ // ... 填充省份数据 ]; const cities = []; // 子级城市数据，会根据provinceId动态加载 const districts = []; // 子级区县数据，会根据cityId动态加载 // 初始化下拉选项 const options = [ { key: '', label: '--请选择--', children: [], }, ].concat(provinces); ``` 3. 使用`v-model`绑定当前选中的地区数据，并在`on-change`事件中处理层级切换： ```html <Select v-model="selectedRegion" @change="handleRegionChange"> <Option :key="item.key" :value="item.value" v-for="(item, index) in options" :label="item.label"> {{ item.label }} <template #children> <Select v-if="item.children.length" :placeholder="--请选择--" @change="handleCityChange"> <Option v-for="subItem in item.children" :key="subItem.key" :value="subItem.value">{{ subItem.label }}</Option> </Select> </template> </Option> </Select> ``` 4. 定义`handleRegionChange`和`handleCityChange`函数，分别负责切换省级、市级下拉框的显示和保存选择的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值