基础渲染

table组件接收两个参数: 列信息 columns,数据 dataSource 。
colunms可能包含以下对象image.png
title是表格的标题,dataIndex和数据源dataSource字段对应,render是函数类型可以自定义渲染内容:function(text, record, index) {}。参数分别为当前行的值,当前行数据,行索引
dataSource可能包含以下对象image.png

  1. <table className="sxd-table" style={{width:"100%",borderCollapse:"collapse"}}>
  2. <thead>
  3. <tr>
  4. {columns2.map((col:Icolumns)=>{
  5. return (
  6. <th className="header-col" key={col.dataIndex}>{col.title}</th>
  7. )
  8. })}
  9. </tr>
  10. </thead>
  11. <tbody>
  12. {data2.map((row:any)=>{
  13. return (
  14. <tr className="body-row" key={row.key}>
  15. {columns2.map((col:any,index:number)=>{
  16. return (
  17. <td className="body-col" key={col.dataIndex}>
  18. {
  19. col.render
  20. ?col.render(row[col.dataIndex],row,index)
  21. :row[col.dataIndex]
  22. }
  23. </td>
  24. )
  25. })}
  26. </tr>
  27. )
  28. })}
  29. </tbody>
  30. </table>