antd 4x

antd 4x, dataIndex,从对象格式,修改为 数组格式
https://ant.design/components/table-cn/
image.png

  1. const colIndex = 1;
  2. const rowIndex = 2;
  3. const columns = [
  4. {
  5. title: '姓名',
  6. dataIndex: 'name',
  7. key: 'name',
  8. },
  9. {
  10. title: '年龄',
  11. dataIndex: 'age',
  12. key: 'age',
  13. },
  14. {
  15. title: '住址',
  16. dataIndex: ['address', colIndex, rowIndex],
  17. key: 'address',
  18. },
  19. {
  20. title: '标签',
  21. dataIndex: ['tags',1],
  22. key: 'tags',
  23. },
  24. ];

antd 3x

巧用 dataIndex处理表格,二维数据

  1. const dataSource = [
  2. {
  3. key: '1',
  4. name: '胡彦斌',
  5. age: 32,
  6. address: '西湖区湖底公园1号',
  7. tags: ['nice', 'developer'],
  8. },
  9. {
  10. key: '2',
  11. name: '胡彦祖',
  12. age: 42,
  13. address: '西湖区湖底公园1号',
  14. tags: ['cool', 'teacher'],
  15. },
  16. ];
  17. const columns = [
  18. {
  19. title: '姓名',
  20. dataIndex: 'name',
  21. key: 'name',
  22. },
  23. {
  24. title: '年龄',
  25. dataIndex: 'age',
  26. key: 'age',
  27. },
  28. {
  29. title: '住址',
  30. dataIndex: 'address',
  31. key: 'address',
  32. },
  33. {
  34. title: '标签',
  35. dataIndex: 'tags[1]',
  36. key: 'tags',
  37. },
  38. ];

如果name是个对象, name: {firstname: ‘Eagle’, lastname: ‘Luo’}
将dataIndex 改为 name.firstname 或 name.lastname来获取下一层级的数据
如果使用了唯一的 dataIndex,那么我们就不再需要给每个 column加上 key了
image.png
https://ant.design/components/table-cn/#components-table-demo-colspan-rowspan

二维数据

  1. [
  2. {
  3. "rate": [ "30", "25" ],
  4. "dataSource": [
  5. [ 10.0, 20.0, 30.0, 50.0, 100.0 ],
  6. [ 10.0, 20.0, 30.0, 50.0, 100.0 ]
  7. ]
  8. },
  9. {
  10. "rate": [ "20%", "30%" ],
  11. "dataSource": [
  12. [ 10.0, 20.0, 30.0, 50.0, 100.0 ],
  13. [ 10.0, 20.0, 30.0, 50.0, 100.0 ]
  14. ]
  15. }
  16. ]

image.png