1.table组件的引入后
` <Table
rowKey={(record) => record.id}
columns={columns}
dataSource={reviewList}
pagination={totalNum > 10 ? pagination : false}
/>
</div>
`
2.1columns用法
columns相当于一个表格的title，可以通过数据源，将自己想要的数据放入表格中
`
const columns = [
{
title: '服务编号',
dataIndex: 'serviceNumber',
key: 'serviceNumber',
ellipsis: true,
render: (text, record) => {
return <a onClick={() => reviewBtn(record)}>{text}</a>;
},
},
]
`
title是每一列的标题，dataIndex是对应数据源的key，可以通过render属性将每一列的元素添加点击事件，并且通过传入record将这一行的数据传给点击函数
`
{
title: '创建时间',
dataIndex: 'createDate',
key: 'createDate',
ellipsis: true,
sorter: (a, b) => Date.parse(a.createDate) - Date.parse(b.createDate),
render: (text, record) => moment(record.createDate).format('YYYY-MM-DD HH:mm:ss'),
},
`
sorter属性，是添加对时间的先后进行排序，Date.parse格式化时间转换为时间戳，这样排序才有效果
moment是将后端返回的时间戳转换为前端需要的格式
2.2 点击跳转详情页
`
import { history } from 'umi';
const reviewBtn = (record) => {
history.push({
pathname: '/supplyDemandApproval/approved/detailDemand',
query: {
id: record.id,
step: 'serviceNumber',
},
});
};
在umi中引入history、，pathname是自己在路由配置中配置的组件，在跳转页面时，可以通过query进行传递参数，可以传入所点击着一行数据的任何数据，而step是自己设置的标识，以便区分所渲染的内容
`
2.3详情页接收参数，识别标识区分渲染
`
const goBack = () => { //这是点击按钮返回放一个页面
window.history.back();
};
//这个是获取传递过来的参数，就是serviceNumber
console.log(history.location.query.step, '获取参数');
//可以通过传入的参数不同，渲染不同的内容
{history.location.query.step === 'serviceNumber' && <span>详情</span>}
`
2.4通过传入的参数判断 step组件的默认选中
`
<Steps
current={Number(
history.location.query.step === 'review' || history.location.query.step === 'propose'
? 1
: history.location.query.step === 'accept' || history.location.query.step === 'bill'
? 2
: history.location.query.step === 'check'
? 3
: history.location.query.step === 'duty'
? 5
: 4
)}
size="small"
>
<Step title="需求申请" />
<Step title="需求复核" />
<Step title="需求受理" />
<Step title="需求审核" />
{history.location.query.step !== 'serviceNumber' && <Step title="资源挂载" />}
<Step title="供需完成" />
</Steps>
这里通过传入参数判断 是否渲染资源挂载这一项，在这之前使用了三目运算符的多重判断
`
3. dataSource是数据源，自己mock或者从后端获取的数据，数据里的属性需要和自己设置的dataIndex相对应
data: { records: [ { id: 10, serviceNumber: '123456', itemName: '最多跑哟躺啊', materialsName:'材料名称', applyScene: '应用场景', provideUnit: '供给部门', cagalogInfo: '姓名|年龄|电话', checkDate: '2021-11-04', status: '待复核', }, ] }
4. pagination分页功能因数据条数选择性的渲染
`
pagination={totalNum > 10 ? pagination : false}
//将pagination封装为一个对象，直接都传过去
const pagination = {
total: totalNum,
showSizeChanger: true,
showTotal: () => `共有${totalNum}条，每页显示：`,
onChange: onPageChange,
onShowSizeChange: onPageChange,
pageSize: pageSize,
current: pageNum,
};
//onPageChange函数，设置状态，通过useEffect 添加依赖请求数据
const onPageChange = (page, size) => {
if (pageSize === size) {
setPageNum(page);
} else {
setPageNum(1);
setPageSize(size);
}
};
onChange和onShowSizeChange需要都设置，分页才会有效果
`
在table中加入树形结构，有个children属性尤为重要,默认是遇到children就认为是树形结构的下一级
