1.antdesign select的下拉数据二次处理
比如返回数据格式为
"customer": [
{
"key": 401111,
"val": "赵艳"
},
{
"key": 401211,
"val": "尹艳"
},
{
"key": 401311,
"val": "阎桂英"
},
{
"key": 401411,
"val": "江杰"
}
],
与antdesign数据不符。需要二处理。
//设置下拉框DOM
const getOptions = (optionItem: any[]) => {
if (optionItem && optionItem.length != 0) {
return optionItem.map((item: any, index: number) => (
<Option value={item.key} key={index} label={item.val}>
{item.val}
</Option>
))
} else {
return null
}
}
form表单中的使用demo
<Form.Item
label="客户名称"
name="customer_id"
style={{ marginBottom: '10px' }}
>
<Select
placeholder="请选择"
maxTagCount={0}
allowClear
style={{ width: 120 }}
optionFilterProp="label"
showSearch
filterOption={filterOption}
>
{getOptions(customer)}
</Select>
</Form.Item>
2.导出 react 接口模式 demo演示
// 导出方法
const {run:runEx} = useRequest(GET_REC_EXPORT,{
manual: true,
onSuccess:(data: {error_code: number, file_large:any}) => {
if(data.file_large == 0) {
window.location.href = `${href}&force_export=1`
}else if(data.file_large == 2){
Modal.warning({
title: '警告信息',
content: '导出数量已超过3万条,请筛选范围后再导出!',
});
}else{
Modal.warning({
title: '警告信息',
content: '当前文件过大,系统正在导出,未避免您长时间等待,请稍后去“文件导出-导出任务管理”页进行数据下载!',
});
}
}
})
// 导出操作
const handleDown = () => {
runEx(params_export)
}
<Button style={{ margin: "0 8px" }} onClick={handleDown}>
导出按钮
</Button>