增加可配置的columns

src/pages/orderList/list.tsx

 import React from 'react';
 import { Table } from 'antd';
-const { Column } = Table;
+import { ColumnsType } from 'antd/es/table';
+import tableColumnsSetting from './tableColumnsSetting'
+
 
 interface DeatilI {
   id: string | number;
@@ -11,12 +13,6 @@ interface DeatilI {
   pay_time: string;
 }
 
-interface ColsI {
-  title: string;
-  dataIndex: string;
-  key: string | number;
-}
-
 interface DataSourceI {
   dataSource: DeatilI[];
   pageSize: number;
@@ -24,66 +20,22 @@ interface DataSourceI {
   totalCount: number;
   handleTableChange: any;
 }
-
-const columns = [
-  {
-    title: '订单号',
-    dataIndex: 'order_no',
-    key: 'order_no'
-  },
-  {
-    title: '已购课程名称',
-    dataIndex: 'class_name',
-    key: 'class_name'
-  },
-  {
-    title: '用户姓名',
-    dataIndex: 'address',
-    key: 'address',
-    render: (row: any) => {
-      return <span>{row.name}</span>;
-    }
-  },
-  {
-    title: '收货地址',
-    dataIndex: 'address',
-    key: 'address',
-    render: (row: any) => {
-      return (
-        <span>
-          {row.province}
-          {row.city}
-          {row.area}
-          {row.address}
-        </span>
-      );
-    }
-  },
-  {
-    title: '联系电话',
-    dataIndex: 'address',
-    key: 'address',
-    render: (row: any) => {
-      return <span>{row.phone}</span>;
+interface IColumnsValue {
+  title: string;
+  dataIndex: string;
+  key: string | number;
+  render?: Function
+}
+const columns: Array<any> = []
+let userColumnsKeys: Array<string> = ['order_no', 'class_name', 'name', 'address', 'phone', 'pay', 'pay_time']
+userColumnsKeys.map((item) => {
+  for (let key in tableColumnsSetting) {
+    if (key === item) {
+      columns.push(tableColumnsSetting[key])
     }
-  },
-  {
-    title: '付款金额（元）',
-    dataIndex: 'pay',
-    key: 'pay'
-  },
-  {
-    title: '下单时间',
-    dataIndex: 'pay_time',
-    key: 'pay_time'
   }
-];
-
-const Cols = (list: ColsI[]) => {
-  return list.map((item: any) => {
-    return <Column {...item} key={item.key} />;
-  });
-};
+  return null
+})
 
 const List: React.FC<DataSourceI> = props => {
   return (
@@ -100,8 +52,9 @@ const List: React.FC<DataSourceI> = props => {
           showTotal: (total, range) =>
             `每页${range[1] - range[0] + 1}条，总计${total} 条`
         }}
+        columns={columns}
       >
-        {Cols(columns)}
+
       </Table>
     </div>
   );

src/pages/orderList/tableColumnsSetting.tsx

+import React from 'react'
+interface IObjectStringKeys {
+  [key: string]: IColumnsValue;
+}
+interface IColumnsValue {
+  title: string;
+  dataIndex: string;
+  key: string | number;
+  render?: Function
+}
+const TableColumnsSetting: IObjectStringKeys = {
+  order_no: {
+    title: '订单号',
+    dataIndex: 'order_no',
+    key: 'order_no'
+  },
+  class_name: {
+    title: '已购课程名称',
+    dataIndex: 'class_name',
+    key: 'class_name'
+  },
+  name: {
+    title: '用户姓名',
+    dataIndex: 'address',
+    key: 'name',
+    render: (row: any) => {
+      return <span>{row.name}</span>;
+    }
+  },
+  address: {
+    title: '收货地址',
+    dataIndex: 'address',
+    key: 'address',
+    render: (row: any) => {
+      return (
+        <span>
+          {row.province}
+          {row.city}
+          {row.area}
+          {row.address}
+        </span>
+      );
+    }
+  },
+  phone: {
+    title: '联系电话',
+    dataIndex: 'address',
+    key: 'phone',
+    render: (row: any) => {
+      return <span>{row.phone}</span>;
+    }
+  },
+  pay: {
+    title: '付款金额（元）',
+    dataIndex: 'pay',
+    key: 'pay'
+  },
+  pay_time: {
+    title: '下单时间',
+    dataIndex: 'pay_time',
+    key: 'pay_time'
+  }
+}
+
+export default TableColumnsSetting
\ No newline at end of file