PC地址选择器示例

简介: PC地址选择器示例

import React, {useEffect, useState} from 'react';
import {CascaderSelect} from '@alifd/next';
import PropTypes from 'prop-types';
import {ProvinciaCascade} from '@api/publicInterface';
import useRequest from "@hooks/useRequest";

/**

  • 1580043700@qq.com
  • Zhang Jun
  • createDate: 2020-12-11
  • @param props
  • @returns {*}
  • @constructor 地址选择器,暂时不需要多选,后期有需求再加。

*/
const params = {token: sessionStorage.getItem('token')};

function Address(props) {
const {showSearch, onChange, disabled, value, dataSource, placeholder, resultAutoWidth, hasClear, depth} = props;
const [source, setSource] = useState([]);

const {data} = useRequest(ProvinciaCascade, params);

useEffect(() => {

   if (!dataSource) {
       setSource(formatData(data, depth));
   } else {
       setSource(dataSource);
   }

}, [dataSource, data]);

return (

   <CascaderSelect
       hasClear={hasClear}
       resultAutoWidth={resultAutoWidth}
       showSearch={showSearch}
       onChange={!!onChange && onChange}
       dataSource={dataSource ?? source}
       value={value && value[depth - 1]}
       disabled={disabled}
       placeholder={placeholder}
   />

);
}

const formatData = (data, depth) => {
if (!data || data.length === 0) {

   return [];

}
return format(data, depth);
};

const format = (data, depth) => {
depth -= 1;
if (depth === -1) {

   return null;

}
if (data) {

   return data.map((v) => {
       return {label: v.name, value: v.id, children: format(v.data, depth)};
   });

} else {

   return null;

}
};

Address.defaultProps = {
resultAutoWidth: false,
showSearch: false,
value: [],
disabled: false,
hasClear: true,
depth: 3,
};

Address.propTypes = {
onChange: PropTypes.func, //值改变
dataSource: PropTypes.array, //数据源,不传递则使用后台接口数据
value: PropTypes.array, //选中的数据
disabled: PropTypes.bool, //是否禁用
placeholder: PropTypes.string, //输入提示
depth: PropTypes.number, //地址显示深度1-3(省市区),默认显示3(省市区)
showSearch: PropTypes.bool, //显示搜素,默认false
hasClear: PropTypes.bool, //是否可清空,默认true
resultAutoWidth: PropTypes.bool, // 搜索结果列表是否和选择框等宽,默认false
};

export default Address;

目录
相关文章
|
Linux iOS开发 UED
探索Qt折线图之美:一次详尽的多角度解析
探索Qt折线图之美:一次详尽的多角度解析
1641 0
|
4月前
|
SQL 数据采集
Dataphin功能Tips系列(56)如何实现质量规则的批量修改
本文介绍了在Dataphin中针对Dataphin表和全域数据表的自定义SQL规则的批量修改的方法。
112 4
|
8月前
|
供应链 算法 调度
【双层模型】考虑供需双侧的综合能源双层优化模型
该程序构建了一个综合能源系统的优化调度双层模型,采用差分进化算法和规划算法分别求解上下层问题。模型涵盖了燃气轮机、锅炉、风电、光伏及储能设备的协同运行,并考虑了供应商与用户的利益平衡。通过满足设备出力、储能、负荷平衡等约束条件,实现了系统经济性和性能的优化。程序基于Matlab+Cplex编写,注释详尽且附带文档说明,便于学习研究。
|
Java
敏感词过滤
布隆过滤器用来判断一个集合中的是否包含某一个元素,由于采用hash运算,有hash碰撞的原因,所以会存在误判。布隆过滤器判定一个元素存在的情况,这个元素可能不存在,但是判定一个元素不存在的时候,是一定不存在的。
380 0
|
对象存储 数据库
2025年 | 9月云大使推广奖励规则
云大使推广返利活动,企业新用户下单返佣加码5%,推广最高返佣45%,新老用户都可参与返利活动。
|
Prometheus 监控 Kubernetes
将service类型由"ClusterIP"改为"NodePort"无法使用nodeip+端口访问服务解决方法.
将service类型由"ClusterIP"改为"NodePort"无法使用nodeip+端口访问服务解决方法.
|
存储 JavaScript API
vite+vue3+ts从0到1搭建企业级项目(3)
vite+vue3+ts从0到1搭建企业级项目
261 0
实战:第四章:java后端日志埋点实现
实战:第四章:java后端日志埋点实现
1381 0
实战:第四章:java后端日志埋点实现
|
JavaScript 前端开发 Windows
【Vue 快速入门系列】Vue中的事件用法
【Vue 快速入门系列】Vue中的事件用法
【Vue 快速入门系列】Vue中的事件用法