table表头超长展示优化/图表列表分页器与滚动条记录逻辑优化

src/components/chart/list.jsx

@@ -47,6 +47,9 @@ class ChartList extends React.Component {
         this.setBodyWidth();
         dispatch({ type: 'chart/fetchList' })
         dispatch({ type: 'chart/remoteGroupList' });
+        this.setState({
+            page: chart.page || 1
+        });
         this.bodyRef.current.parentNode.scrollTo(0, chart.listScrollTop)
         window.addEventListener('resize', this.setBodyWidth);
     }
@@ -54,7 +57,10 @@ class ChartList extends React.Component {
     componentWillUnmount() {
         const { dispatch } = this.props;
         window.removeEventListener('resize', this.setBodyWidth);
-        dispatch({ type: 'chart/setField', name: 'listScrollTop', value: this.bodyRef.current.parentNode.scrollTop });
+        dispatch({ type: 'chart/setFields', fields: [
+            { name: 'listScrollTop', value: this.bodyRef.current.parentNode.scrollTop },
+            { name: 'page', value: this.state.page },
+        ] });
     }
 
     /**
@@ -397,6 +403,8 @@ class ChartList extends React.Component {
     onPageChange = (pageNumber) => {
         this.setState({
             page: pageNumber
+        }, () => {
+            this.bodyRef.current.parentNode.scrollTo(0, 0)
         })
     }
 

src/themes/default/base.less

@@ -44,8 +44,18 @@
 .ant-table-row {
     background: #fff;
 }
-.ant-table-thead > tr > th {
-    background: transparent;
+.ant-table-thead {
+    >tr {
+        >th {
+            white-space: nowrap;
+            max-width: 0px;
+            background: transparent;
+            >div {
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
 }
 .ant-table-thead > tr,.ant-table-thead > tr:hover {
     height: 40px;