pro-components
pro-components copied to clipboard
👑 [需求]ProDescriptions自定义valueType,ProProvider.Provider 对 render 函数 props 参数增加 dataSource
🔩 所属模块或组件 【ProDescriptions】
🥰 需求描述
ProDescriptions在使用 column 配置自定义valueType,可以获取ProDescription的 dataSource 属性。
<ProProvider.Provider
value={{
...values,
valueTypeMap: {
link: {
renderFormItem: (text, props: any) => {
const noStyle = props.noStyle ? props.noStyle : true;
return <ProFormText {...props} noStyle={noStyle} />;
},
render: (text: any, props: Omit<ProFieldFCRenderProps, 'onChange' | 'text'>) => {
// console.log('text>>', text, props);
return <LinkText {...props} />;
},
},
},
}}
>
{children}
</ProProvider.Provider>
在ProCompnent自定义valueType,valueTypeMap中render方法第一个参数只是dataIndex的 value。在一些通用的业务,可能要信组件的其它字段判断处理,自定义valueType 是为了进一步封装业务组件,减少页面的重复代码
⛰ 功能需求适用场景
- 做 Link 组件,例如,
dataIndex是只是返回一个单号,但这个单号在不同的状态要做不同跳转、显示处理。 - 业务组件的二次封装
🧐 解决方案
在 ProTable 自定义 valueType,在ProProvider.Provider下render中 props 属性中有当前数据列表的 record 属性获取当前行的数据对象。ProDescriptions组件应该也增加record属性返回ProDescriptions的 dataSource,record这个属性名只是建议
🚑 其他信息
Hello @darin-lao. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!
你好 @darin-lao,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请务必提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

希望能跟外面配置的columns中render以及renderFormItem是同样的类型,可以传入同样的参数
TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成,可以尝试下方案,官方人员会在一定时间后继续继续处理。
你好,感谢反馈。你的需求是让 render 和 renderFormItem 的参数相同,这样能让这两个方法的逻辑更加统一,同时也可以提高代码的可复用性。
我们了解到您的需求,我们会考虑在未来的版本中增加这个功能。在目前版本中,您可以使用以下方法来实现这个需求:
您可以使用 render 和 renderFormItem 中的公共参数 text 以及 record 进行处理,这两个参数在 ProTable 中定义。同时,您也可以在 ProDescriptions 的 column 中使用 render 方法并传入相应的参数:
{
title: 'Name',
dataIndex: 'name',
render: (text: string, record: any) => renderName(text, record),
},
其中 renderName 方法可以封装 render 和 renderFormItem 的公共逻辑。
另外,您还可以使用 ProDescriptions 中新增的 params 参数,可以让 render 和 renderFormItem 方法在一个函数中处理公共逻辑,进一步提高代码的可复用性:https://procomponents.ant.design/components/descriptions-cn/#params
暂时没有计划