https://juejin.cn/post/6963086046720425992#heading-3
https://juejin.cn/post/6882703111710834701
https://www.jianshu.com/p/39404c94dbd0
https://juejin.cn/post/6844903982742110216

https://github.com/wubostc/virtualized-table-for-antd
https://codesandbox.io/s/tianjiahuanchongqu-vlxg2
https://codesandbox.io/s/jinyongshubiaoshijian-554tw
https://codesandbox.io/s/xiugaihuanchongqushezhi-z3t08
https://clauderic.github.io/react-tiny-virtual-list/#/controlled-props/controlled-scroll-offset?_k=87jwx1
https://codesandbox.io/s/kymm7z9qr
https://developers.google.com/web/updates/2016/07/infinite-scroller
https://github.com/clauderic/react-tiny-virtual-list

https://github.com/ctq123/ant-virtual-table
https://codesandbox.io/s/antdxunibiao-demo-rj5qc?file=/index.js
https://github.com/crawler-django/virtuallist-antd

https://ixkaito.github.io/stickyTableColumns/
https://github.com/ixkaito/stickyTableColumns

https://codesandbox.io/s/drag-row-1fjg4?file=/index.js

https://turnerniles.github.io/react-virtualized-pivot/
https://github.com/turnerniles/react-virtualized-pivot

columns 设置width无效

设置 scroll的width等于所有列宽之和 scroll={{ x: 100%}}）

  • x: 100% 无效
  • x: 等于父级宽度，也无效
  • 当td里的内容超出了width的范围时，会出现width不固定，也就是width不生效 ```jsx const columns = [ { title: ‘姓名’, dataIndex: ‘name’, width: 100 }, // … 100 item ];

  3. <a name="r3ycs"></a>
  4. ## 文本超出隐藏
  5. table是一个整体，每一列td的宽度是由一个其中一个最长td的宽度决定的
  6. ```less
  7. .table {
  8.     word-wrap:bread-word;
  9.   word-break:break-all;
  10.   table-layout:fixed
  11. }

在 3.24.0 之前，你需要针对超长字段的列增加折断样式

  • 最好的解决方案可能还是不默认 break word，提供一个属性来针对某些列进行断行处理
  • 超长连续字段（长数字和长单词） 破坏表格布局的问题，即使你指定了列的宽度也会被挤开 ```jsx columns={[ // … textWrap: ‘word-break’, ]}

columns={[ // … render: (text, record) => (

{text}
), ]}

  3. <a name="vI7hS"></a>
  4. ### antd4.x ellipsis
  5. 4.x 设置 column.ellipsis 可以让单元格内容根据宽度自动省略<br />设置 column.ellipsis.showTitle 关闭单元格内容自动省略后默认的 title 提示, 使用 Tooltip 替代<br />[https://ant.design/components/table-cn/#API](https://ant.design/components/table-cn/#API)
  6. ```jsx
  7. import { Table, Tooltip } from 'antd';
  9. const columns = [
  10.   {
  11.     title: 'Name',
  12.     dataIndex: 'name',
  13.     key: 'name',
  14.     render: text => <a>{text}</a>,
  15.     width: 150,
  16.   },
  17.   {
  18.     title: 'Long Column Long Column Long Column',
  19.     dataIndex: 'address',
  20.     key: 'address',
  21.     ellipsis: true,
  22.   },
  23.   {
  24.     title: 'Long Column Long Column Long Column',
  25.     dataIndex: 'address',
  26.     key: 'address 2',
  27.     ellipsis: {
  28.       showTitle: false,
  29.     },
  30.     render: address => (
  31.       <Tooltip placement="topLeft" title={address}>
  32.         {address}
  33.       </Tooltip>
  34.     ),
  35.   },
  36. ];

Select超出隐藏

  1. <Select
  2.   style={{ width: 100 }}
  3. >
  4.   {
  5.     dataSource.map(({ title, id }) => {
  6.       const width = getTextWidth(title);
  7.       return (
  8.         <Select.Option key={id} value={title}>
  9.           <Tooltip title={width > 100 ? title : null}>
  10.             <span className="ellipsis" style={{ width: 100 }}>{title}</span>
  11.           </Tooltip>
  12.         </Select.Option>
  13.       );
  14.     })
  15.   }
  16. </Select>

动态计算页面可视区剩余高度

Table 小屏下会出现两条滚动个,页面自身一个，table一个

  • calc(100vh - 导航条的高度 - 面包屑的高度)
  • 需要 addEventListener(‘resize’) ```jsx // 页面总视图高度 document.body.clientHeight

document.documentElement.clientHeight

  4. <a name="VEZbH"></a>
  5. ## td列内滚动
  6. 在columns中设置了列的宽度，设置最大高度
  8. - 内容超出该高度会出现滚动条高度，overflow-y: scroll 溢出滚动就可以
  9. - 滚动条样式为浏览器自带的
  10. - 可以通过 [css来美化滚动条样式](https://www.yuque.com/lulongwen/web/gmz4wk)
  12. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/112859/1630109924170-5c53b506-c0e2-446d-87ab-8a77f7ae0288.png#clientId=udf5b35d7-5036-4&from=paste&height=252&id=u12de1e00&originHeight=504&originWidth=1430&originalType=binary&ratio=1&rotation=0&showTitle=false&size=114264&status=done&style=none&taskId=u98fba65f-8525-490e-90f7-2fabc3a1cd8&title=&width=715)
  13. ```jsx
  14. {
  15.   title: '评价内容',
  16.   dataIndex: 'comment',
  17.   width: 120,
  18.   render: (text) => <div className={styled.scroll}>{text}</div>
  19. }

less

  1. .scroll {
  2.   height: 90px;
  3.   // overflow-y: scroll;
  4.   overflow-y: auto;
  5. }

https://blog.csdn.net/sillies_3/article/details/102833859

可滑动表格组件
https://blog.csdn.net/weixin_45416217/article/details/104791095
https://segmentfault.com/q/1010000016507297/a-1020000016507798

自定义滚动条

https://blog.csdn.net/sillies_3/article/details/102833859
滚动加载数据https://blog.csdn.net/abc2346789/article/details/101188416
image.png
要把 .ant-table-body的 overflow 设置为 hidden，否则会显示默认的 滚动条区域。

  1. import React, { useEffect, useRef } from 'react';
  2. import { Table } from 'antd';
  3. import { Scrollbars } from 'react-custom-scrollbars';
  5. // 数据表头
  6. const columns = [
  7.   {
  8.     title: '姓名',
  9.     dataIndex: 'name',
  10.     key: 'name',
  11.   },
  12.   {
  13.     title: '年龄',
  14.     dataIndex: 'age',
  15.     key: 'age',
  16.   },
  17.   {
  18.     title: '住址',
  19.     dataIndex: 'address',
  20.     key: 'address',
  21.   },
  22. ];
  24. const dataSource = [
  25.   {
  26.     key: '1',
  27.     name: '胡彦斌',
  28.     age: 32,
  29.     address: '西湖区湖底公园1号',
  30.   },
  31.   {
  32.     key: '2',
  33.     name: '胡彦祖',
  34.     age: 42,
  35.     address: '西湖区湖底公园1号',
  36.   },
  37.   {
  38.     key: '3',
  39.     name: '胡彦祖',
  40.     age: 42,
  41.     address: '西湖区湖底公园1号',
  42.   },
  43.   {
  44.     key: '4',
  45.     name: '胡彦祖',
  46.     age: 42,
  47.     address: '西湖区湖底公园1号',
  48.   },
  49.   {
  50.     key: '5',
  51.     name: '胡彦祖',
  52.     age: 42,
  53.     address: '西湖区湖底公园1号',
  54.   },
  55.   {
  56.     key: '6',
  57.     name: '胡彦祖',
  58.     age: 42,
  59.     address: '西湖区湖底公园1号',
  60.   },
  61.   // 增加空白列 {}
  62. ];
  64. // 滚动条参数
  65. const scroll = {
  66.   // 如果最终结果表格内容与表格头部无法对齐，表格头需要增加空白列，弹性布局
  67.   width: '100%',
  68.   // 最大高度，内容超出该高度会出现滚动条
  69.   height: 100,
  70. };
  72. function ScrollTable() {
  73.   const tableRef = useRef();
  75.   useEffect(() => {
  76.     // 覆盖 ant table 自带滚动条样式
  77.     const el = tableRef.current.container.parentNode
  78.     el.style.overflow = 'hidden';
  79.   }, []);
  81.   // 滚动结束，记下滚动位置
  82.   function handleScrollStop() {
  83.     if (!tableRef.current) return;
  84.     tableRef.current.getScrollTop();
  85.   }
  87.   // 用 react-custom-scrollbars包裹住表格内容
  88.   const components = {
  89.     table(props) {
  90.       const { className, children } = props;
  91.       return (
  92.         <Scrollbars
  93.           style={scroll}
  94.           onScrollStop={handleScrollStop}
  95.           ref={tableRef}
  96.         >
  97.           <table className={className}>
  98.             {children}
  99.           </table>
  100.         </Scrollbars>
  101.       );
  102.     },
  103.   };
  105.   return (
  106.     <Table
  107.       dataSource={dataSource}
  108.       columns={columns}
  109.       // scroll选项必须开启，宽高与react-custom-scrollbars插件一致
  110.       scroll={{ y: scroll.height, x: scroll.width }}
  111.       // 将 react-custom-scrollbars组件插入到表格中
  112.       components={components}
  113.     />
  114.   );
  115. }
  117. export default ScrollTable;

image.png