表格伸缩

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "eslintIntegration": true,
+  "stylelintIntegration": true,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all",
+  "arrowParens": "always"
+}

package.json

@@ -21,6 +21,7 @@
     "axios": "^0.19.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-resizable": "^1.10.1",
     "react-router-dom": "^5.2.0",
     "ts-import-plugin": "^1.6.6"
   },
@@ -44,6 +45,7 @@
     "node-notifier": "^7.0.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
+    "prettier": "^2.0.5",
     "style-loader": "^1.2.1",
     "ts-loader": "^7.0.4",
     "typescript": "^3.8.3",

src/index.tsx

@@ -7,9 +7,11 @@ import App from './pages/App.tsx';
 //   return require.context('./pages', true, /\.tsx$/);
 // }
 
+console.log(9);
+
 ReactDOM.render(
   <HashRouter>
     <App />
   </HashRouter>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );

src/pages/App.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 import Home from './Home/index.js';
 import Other from './Other';
+import List from './List';
 
 import './app.less';
 import background from './images/background.jpg';
@@ -33,6 +34,7 @@ export default class App extends React.Component {
           <Route exact path="/" component={Home} />
           <Route exact path="/home" component={Home} />
           <Route exact path="/other" component={Other} />
+          <Route exact path="/list" component={List} />
           {/* {this.test().map((key): any => (
             <Route path={`/${key.reqComName}`} component={key.component} />
           ))} */}

src/pages/Home/home.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
+import { withRouter } from 'react-router-dom';
 import { Button } from 'antd';
 import Header from '@/components/layout/Header.tsx';
 export default class Home extends React.Component {
-  test() {
-    console.log('Home');
+  constructor(props) {
+    super(props);
+  }
+  test(path) {
+    this.props.history.push(`/${path}`);
   }
   render() {
     return (
@@ -12,7 +16,10 @@ export default class Home extends React.Component {
         Home
         <div></div>
         <div>
-          <Button onClick={(e) => this.test()}>goto</Button>
+          <Button onClick={(e) => this.test('other')}>other</Button>
+        </div>
+        <div>
+          <Button onClick={(e) => this.test('list')}>list</Button>
         </div>
       </div>
     );

src/pages/List/List.less

@@ -0,0 +1,15 @@
+.list-wrapper{
+  .react-resizable {
+    position: relative;
+    background-clip: padding-box;
+  }
+  .react-resizable-handle {
+    position: absolute;
+    width: 10px;
+    height: 100%;
+    bottom: 0;
+    right: -5px;
+    cursor: col-resize;
+    z-index: 1;
+  }
+}

src/pages/List/List.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import { Button, Table } from 'antd';
+import { Resizable } from 'react-resizable';
+
+// class ResizeableTitle extends React.Component {
+//   constructor(props) {
+//     super(props);
+//   }
+//
+// }
+
+const ResizeableTitle = (props) => {
+  const { onResize, width, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      handle={
+        <span
+          className="react-resizable-handle"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        />
+      }
+      onResize={onResize}
+      draggableOpts={{ enableUserSelectHack: false }}
+    >
+      <th {...restProps} />
+    </Resizable>
+  );
+};
+
+export default class List extends React.Component {
+  state = {
+    columns: [
+      {
+        title: 'Date',
+        dataIndex: 'date',
+        width: 200,
+      },
+      {
+        title: 'Amount',
+        dataIndex: 'amount',
+        width: 100,
+        sorter: (a, b) => a.amount - b.amount,
+      },
+      {
+        title: 'Type',
+        dataIndex: 'type',
+        width: 100,
+      },
+      {
+        title: 'Note',
+        dataIndex: 'note',
+        width: 100,
+      },
+      {
+        title: 'Action',
+        key: 'action',
+        render: () => <a>Delete</a>,
+      },
+    ],
+  };
+
+  components = {
+    header: {
+      cell: ResizeableTitle,
+    },
+  };
+
+  data = [
+    {
+      key: 0,
+      date: '2018-02-11',
+      amount: 120,
+      type: 'income',
+      note: 'transfer',
+    },
+    {
+      key: 1,
+      date: '2018-03-11',
+      amount: 243,
+      type: 'income',
+      note: 'transfer',
+    },
+    {
+      key: 2,
+      date: '2018-04-11',
+      amount: 98,
+      type: 'income',
+      note: 'transfer',
+    },
+  ];
+
+  handleResize = (index) => (e, { size }) => {
+    this.setState(({ columns }) => {
+      const nextColumns = [...columns];
+      nextColumns[index] = {
+        ...nextColumns[index],
+        width: size.width,
+      };
+      return { columns: nextColumns };
+    });
+  };
+
+  render() {
+    const columns = this.state.columns.map((col, index) => ({
+      ...col,
+      onHeaderCell: (column) => ({
+        width: column.width,
+        onResize: this.handleResize(index),
+      }),
+    }));
+
+    return (
+      <Table
+        className={'list-wrapper'}
+        bordered
+        components={this.components}
+        columns={columns}
+        dataSource={this.data}
+      />
+    );
+  }
+}

src/pages/List/index.js

@@ -0,0 +1,4 @@
+import List from './List.tsx';
+import './List.less';
+
+export default List;

src/pages/Other/Other.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
+import { withRouter } from 'react-router-dom';
 import { Button } from 'antd';
 
 export default class Other extends React.Component {
+  constructor(props) {
+    super(props);
+  }
   test() {
-    console.log('Other');
+    this.props.history.goBack();
   }
   render() {
     return (
@@ -15,4 +19,4 @@ export default class Other extends React.Component {
       </div>
     );
   }
-}
+}