拖拽

src/components/ProductList.tsx

@@ -1,7 +1,7 @@
 import { Table, Popconfirm, Button } from 'antd';
 import { Resizable } from 'react-resizable';
 import './ProductList.less';
-
+let columns = [];
 const ResizeableTitle = props => {
   const { onResize, width, ...restProps } = props;
 
@@ -19,7 +19,9 @@ const ResizeableTitle = props => {
           onClick={e => {
             e.stopPropagation();
           }}
-        />
+        >
+          {width}
+        </span>
       }
       onResize={onResize}
       draggableOpts={{ enableUserSelectHack: false }}
@@ -38,17 +40,18 @@ const ProductList = state => {
   const { onDelete, products } = state;
   // console.log(state);
 
-  let columns = [];
   const handleResize = index => (e, { size }) => {
-    console.log(size);
-    console.log(setState);
+    console.log(size, this);
+
+    // console.log(setState);
 
-    const nextColumns = [...columns];
-    nextColumns[index] = {
-      ...nextColumns[index],
-      width: size.width,
-    };
-    columns = nextColumns;
+    // const nextColumns = [...columns];
+    // nextColumns[index] = {
+    //   ...nextColumns[index],
+    //   width: size.width,
+    // };
+    columns[index]['width'] = 500;
+    console.log(columns[index], columns[index]['width']);
   };
   for (let i = 0; i < 15; i++) {
     columns.push({

src/pages/products.tsx

@@ -2,7 +2,10 @@ import { connect, history } from 'umi';
 import { Button } from 'antd';
 import ProductList from '@/components/ProductList';
 
-const Products = ({ dispatch, products }) => {
+const Products = state => {
+  const { dispatch, products } = state;
+  console.log(state);
+
   function handleDelete(id) {
     dispatch({
       type: 'products/delete',
@@ -10,7 +13,9 @@ const Products = ({ dispatch, products }) => {
     });
   }
   function goto() {
-    console.log(history.push('/'));
+    console.log(products);
+
+    //console.log(history.push('/'));
   }
   return (
     <div>

src/pages/resize.less

@@ -1,16 +1,15 @@
-.title {
-  background: rgb(242, 121, 195);
-}
-/deep/.react-resizable {
-  position: relative;
-  background-clip: padding-box;
-  /deep/.react-resizable-handle {
-    position: absolute;
-    width: 10px;
-    height: 100%;
-    bottom: 0;
-    right: -5px;
-    cursor: col-resize;
-    z-index: 1;
+.tast {
+  /deep/.react-resizable {
+    position: relative;
+    background-clip: padding-box;
+    /deep/ .react-resizable-handle {
+      position: absolute;
+      width: 10px;
+      height: 100%;
+      bottom: 0;
+      right: -5px;
+      cursor: col-resize;
+      z-index: 1;
+    }
   }
 }

src/pages/resize.tsx

@@ -1,4 +1,4 @@
-import { Table } from 'antd';
+import { Table, Button } from 'antd';
 import './resize.less';
 import { Resizable } from 'react-resizable';
 
@@ -28,7 +28,22 @@ const ResizeableTitle = props => {
     </Resizable>
   );
 };
-
+let data = [];
+(() => {
+  for (let index = 0; index < 10000; index++) {
+    data.push({
+      key: index,
+      date: '2018-02-11__' + index,
+      amount: 120,
+      age: 12,
+      age1: 12,
+      age2: 12,
+      age3: 12,
+      type: 'income',
+      note: 'transfer',
+    });
+  }
+})();
 export default class Demo extends React.Component {
   state = {
     columns: [
@@ -36,6 +51,8 @@ export default class Demo extends React.Component {
         title: 'Date',
         dataIndex: 'date',
         width: 200,
+        maxWidth: 400,
+        fixed: 'left',
       },
       {
         title: 'Amount',
@@ -48,6 +65,26 @@ export default class Demo extends React.Component {
         dataIndex: 'type',
         width: 100,
       },
+      {
+        title: 'Age',
+        dataIndex: 'age',
+        width: 100,
+      },
+      {
+        title: 'Age1',
+        dataIndex: 'age1',
+        width: 100,
+      },
+      {
+        title: 'Age2',
+        dataIndex: 'age2',
+        width: 100,
+      },
+      {
+        title: 'Age3',
+        dataIndex: 'age3',
+        width: 100,
+      },
       {
         title: 'Note',
         dataIndex: 'note',
@@ -56,9 +93,12 @@ export default class Demo extends React.Component {
       {
         title: 'Action',
         key: 'action',
+        fixed: 'right',
         render: () => <a>Delete</a>,
       },
     ],
+    data: [],
+    scrollWidth: 999,
   };
 
   components = {
@@ -67,41 +107,80 @@ export default class Demo extends React.Component {
     },
   };
 
-  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 }) => {
+    this.setState(({ columns, scrollWidth }) => {
+      const oldWidth = columns[index]['width'];
       const nextColumns = [...columns];
-      nextColumns[index] = {
-        ...nextColumns[index],
-        width: size.width,
-      };
-      return { columns: nextColumns };
+      let nextScrollWidth = scrollWidth;
+      if (size.width > 100) {
+        if (!nextColumns[index]['fixed']) {
+          nextColumns[index] = {
+            ...nextColumns[index],
+            width: size.width,
+          };
+          nextScrollWidth = nextScrollWidth - oldWidth + size.width;
+        } else {
+          const maxWidth = nextColumns[index].maxWidth;
+          if (size.width < maxWidth) {
+            nextColumns[index] = {
+              ...nextColumns[index],
+              width: size.width,
+            };
+            nextScrollWidth = nextScrollWidth - oldWidth + size.width;
+          }
+        }
+      }
+
+      return { columns: nextColumns, scrollWidth: nextScrollWidth };
     });
   };
+  test() {
+    this.setState(({ data }) => {
+      const nextData = data;
+      const i = data.length;
+      // console.log(data);
+      for (let index = 0; index < 10; index++) {
+        nextData.push({
+          key: i + index,
+          date: '2018-02-11' + i + index,
+          amount: 120,
+          age: 12,
+          age1: 12,
+          age2: 12,
+          age3: 12,
+          type: 'income',
+          note: 'transfer',
+        });
+      }
+      console.log(nextData.length);
 
+      return { data: nextData };
+    });
+    this.forceUpdate();
+    // for (let index = 0; index < 10; index++) {
+    //   this.data.push({
+    //     key: i + index,
+    //     date: '2018-02-11' + i + index,
+    //     amount: 120,
+    //     age: 12,
+    //     age1: 12,
+    //     age2: 12,
+    //     age3: 12,
+    //     type: 'income',
+    //     note: 'transfer',
+    //   });
+    // }
+    // console.log(this.data.length);
+
+    // this.setState(({ columns, scrollWidth, data }) => {
+    //   console.log(data);
+
+    //   // const nextColumns = [...columns];
+    //   // nextColumns[2].width += 10;
+    //   // scrollWidth += 10;
+    //   // return { columns: nextColumns, scrollWidth };
+    // });
+  }
   render() {
     const columns = this.state.columns.map((col, index) => ({
       ...col,
@@ -112,12 +191,24 @@ export default class Demo extends React.Component {
     }));
 
     return (
-      <Table
-        bordered
-        components={this.components}
-        columns={columns}
-        dataSource={this.data}
-      />
+      <div>
+        <Button onClick={e => this.test()}>test{this.state.scrollWidth}</Button>
+        <div>{this.state.data.length}</div>
+        <Table
+          className={'tast'}
+          bordered
+          scroll={{ x: this.state.scrollWidth, y: 340 }}
+          components={this.components}
+          columns={columns}
+          dataSource={data}
+          pagination={false}
+        />
+        <div>
+          {this.state.data.map(item => (
+            <div key={item.key}>{item.key}</div>
+          ))}
+        </div>
+      </div>
     );
   }
 }