百科科技编程日记

结合antd-mobile选择器的行政区三级联动组件

百科 2023-09-07 编程日记

实现效果如下：

老实说实现方法很简单，antd-mobile提供了组件，只是没提供国家行政区数据，我只是把数据‘交给’这个组件罢了。

这里使用的是国家标准(GB/T2260)，也就是2016年的标准行政区。

如果大佬有最新的数据，希望能分享一下

2022 更新 antd推荐使用china-division 提供的数据

代码中使用的数据：行政区数据（如果前面失效链接: https://pan.baidu.com/s/1oqdihRVTknM_AdzX31oZzg 提取码: 54qx ）

把上面下载的json文件放到下面同级文件夹下参考这句引用let districtData = require('./location');

import {Picker} from 'antd-mobile'
import React from 'react'const CustomChildren = props => ({ backgroundColor: '#fff', paddingLeft: 15 }}>{ display: 'flex', height: '45px', lineHeight: '45px',position:'relative',borderBottom:0 }}>{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{props.children}
{ textAlign: 'right', color: '#888', marginRight: 15 }}>{props.extra}


);export default class extends React.Component {constructor(props){super(props);this.state={pickerValue: [],};}render(){let antdDistrict =[];let districtData = require('./location');Object.keys(districtData).forEach((index)=>{let itemLevel1 ={};let itemLevel2 ={};itemLevel1.value = districtData[index].code;itemLevel1.label = districtData[index].name;itemLevel1.children = [];let data = districtData[index].cities;Object.keys(data).forEach((index)=>{itemLevel2.value = data[index].code;itemLevel2.label = data[index].name;itemLevel2.children = [];let data2 = data[index].districts;let itemLevel3 ={};itemLevel3.children = [];Object.keys(data2).forEach((index)=>{itemLevel3.value = index;itemLevel3.label = data2[index];itemLevel2.children.push(itemLevel3);itemLevel3 ={};});itemLevel1.children.push(itemLevel2);itemLevel2 ={};});antdDistrict.push(itemLevel1)});console.log(antdDistrict);return ( this.setState({ pickerValue: v })}onOk={v => this.setState({ pickerValue: v })}onClick={()=>{console.log('xx')}}>Customized children)}
}

附网上查到的资源：下拉框式行政区组件

获取行政区

本文链接：https://hf.jiuquan.cc/a-1022434/

上一篇：vue3 使用 element-china-area-data 实现地区选择器
下一篇：ajax传参 get/post格式下单个参数分别传值写法

百科科技 编程日记

结合antd-mobile选择器的行政区三级联动组件

相关推荐

百科科技编程日记