UI组件 - ProComponents - ProTable
作者：互联网
1 说明
1 文档中有很多代码是让人难以接受的
2
2 难以接受的代码
文档 --> const columns: ProColumns<GithubIssueItem>[] = [ ...] // 可能就是在描述, 你要给我赋值一个数组
实际 --> columns = [ ...] // 主要用于设置表头的
文档 --> <ProTable <TableListItem> columns={this.columns}/> // 某些不合理的 <> 内容可以认为是注释信息
实际 --> <ProTable columns={this.columns}/>
文档 --> const ref = useRef<ActionType>() // useRef 都查不到
实际 --> const ref = React.createRef() // 理解为, 创建一个自己的 Refs
文档 --> { transform: (value: any) => any }
实际 --> { transform: }
文档 --> (action) => ReactNode[] // 表示数组里面放, 标签元素
实际 --> () => [<Button>呵呵<Button/>, <Button>哈哈<Button/>] // 可以没有参数
3 文档常识问题
1 ReactNode --> 表示元素标签
3 组件标签的常用 API 属性
<ProTable
headerTitle = "" // 表格左上边的文字标题 --> 示例中
bordered // 布尔属性 --> 表示带边框的表格 --> Ant Design
actionRef={this.actionRef} // 可手动触发 table 的 reload(重新加载) 等操作 --> ProTable
formRef={this.formRef} // 也是表单数据域的纽带 --- 和上面的区别暂时不知道 --> ProTable
rowKey="id" // 表格行 key 的取值，可以是字符串或一个函数 ---> Ant Design
search={{}} // 是否显示搜索表单，传入对象时为搜索表单的配置, 有一小点明白 ---> ProTable
pagination={{}} // 分页器的相关配置 ---> Ant Design
toolBarRender={()=>{}} // 渲染工具栏 --> 可在下面的表格头上面添加按钮 ---> ProTable
columns={this.columns} // 终于是最简单的, 表格列的导航栏, 但是也有不少可操作空间的 --> Ant Design
request={} // 获取数据源的方法, 只是大致知道干什么的 ---> ProTable
rowSelection={{}} // 表格行是否可选择, 好多配置项, 看不懂, 好难 ---> Ant Design
expandedRowRender={} // 执法仪管理, 项目里面的, 这可能是个自定义事件 // 确定不以 on 开头是否可以
>
1 actionRef // 使用流程
-------------------------------------------------------------------------------
actionRef = React.createRef() // 组件中定义方法的位置, 创建 Refs
<ProTable actionRef={this.actionRef} /> // 结合上面, 应该是那个重置功能
-------------------------------------------------------------------------------
2 columns // 涉及问题
-------------------------------------------------------------------------------
columns = [
{
title: '用户', // 表头标题名
dataIndex: 'username', // 列数据在数据项中对应的路径, 支持通过数组查询嵌套路径
key: 'username', // 保证其唯一性, 如果已经设置了唯一的 dataIndex, 可以忽略这个属性
hideInSearch: true, // 默认会出现该项对应的搜索表单, 设置这个即可隐藏 --- 太牛逼了这功能
render: () => {}, // 貌似可以控制表格内容或格式的
renderFormItem: () => {}, // 渲染查询表单的输入组件
hideInTable: true, // 在表格中不显示
valueType: 'unitTree', // 自定义, 文档可以说是根本看不懂
ellipsis: true, // 关于自动收缩的
}
]
-------------------------------------------------------------------------------
3 "columns/valueType" // 绿色的是 columns 的内置 API
-------------------------------------------------------------------------------
很多步骤 -- 视图笔记有
-------------------------------------------------------------------------------
3 rowSelection // 多选功能涉及的问题 -- Ant Design
-------------------------------------------------------------------------------
rowSelection={{ // 传入的应该是一个对象
onChange: () => {} // 选中项发生变化时的回调 -- 还有很多配置项
}}
-------------------------------------------------------------------------------
4 toolBarRender
-------------------------------------------------------------------------------
toolBarRender = () => [
<Button type="primary" key="primary" onClick={() => {this.setState({showFormModal: true})}}>
<PlusOutlined /> {___('新增')}
</Button>,
<Button type="primary" key="primary" onClick={() => {}}>
<ImportOutlined /> {___('导入')}
</Button>
]
toolBarRender={this.toolBarRender}
-------------------------------------------------------------------------------
5 search // ProTable 自带重置和查询, 这个 API 可以在此位置添加新的按钮
-------------------------------------------------------------------------------
search={{
labelWidth: 70,
optionRender: (searchConfig, formProps, dom) => [
...dom.reverse(),
<ExcelBar key="export" type="default" name={___('导出')} url='/api/log/export'
params={() => {
return formProps.form.getFieldsValue()
}}
/>
]
}} // 有很多自己的 API 不是看的很懂
-------------------------------------------------------------------------------
6 pagination // 分页器
-------------------------------------------------------------------------------
pagination={{
show: true, // 文档没有
size: 'default', // 当为 small 时, 是小尺寸分页
pageSize: 10, // 每页条数
current: 1, // 当前页数
}}
-------------------------------------------------------------------------------
7 request // 获取数据的 API
-------------------------------------------------------------------------------
import { query } from '@/services/userApi'; // 数据接口
querySearch = async (params, sorter, filter) => {
// 改变分页传参，服务端要求的参数是page
params.page = params.current
const result = await query({ ...params, perPage: params.pageSize, sorter, filter });
return {
data: result.data.data,
total: result.data.total,
success: true,
pageSize: result.data.perPage,
current: parseInt(`${params.currentPage}`, 10) || 1,
}
}
request={(params, sorter, filter) => this.querySearch(params, sorter, filter)}
-------------------------------------------------------------------------------
8
-------------------------------------------------------------------------------
-------------------------------------------------------------------------------
标签：---,文档,--,---------------------------------------------------------------------- 来源： https://blog.csdn.net/weixin_46178697/article/details/117705584