样本

src/view/Manage/Model/Component/SampleModal.jsx

 import React, { useEffect, useState } from 'react';
-import { Modal, Button, Form, Input } from 'antd';
+import { Modal, Button, Form, Input, Table } from 'antd';
 import { dispatch } from '../../../../model';
-import Table from '../../ResizeableTable';
 
 const FC = (props) => {
   const {visible, service, onCancel} = props;
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState(undefined);
-  
-  const columns = [
-    { 
-      title: 'catalog_id',
-      dataIndex: 'catalog_id' 
-    },
-    { 
-      title: 'catalog_name',
-      dataIndex: 'catalog_name' 
-    },
-    { 
-      title: 'display_order',
-      dataIndex: 'display_order' 
-    },
-  ]
+  const [cols, setCols] = useState([]);
   
   useEffect(() => {
     if (visible) {
@@ -41,6 +26,12 @@ const FC = (props) => {
       callback: data => {
         setLoading(false);
         setData(data?.content||[]);
+
+        const newCols = [];
+        data?.headers?.forEach(item => {
+          newCols.push({title: item, dataIndex: item, width: 150, ellipsis: true});
+        });
+        setCols(newCols);
       },
       error: () => {
         setLoading(false);
@@ -68,17 +59,17 @@ const FC = (props) => {
       forceRender
       visible={visible}
       title={`${service?.name}的样本数据`}
-      width={540}
+      width={650}
       onCancel={() => {cancel()}}
       footer={footer}
     >
       <Table 
         loading={loading} 
-        rowKey={'catalog_id'}
-        columns={columns} 
+        columns={cols} 
         dataSource={data||[]} 
         size='small'
         style={{ maxHeight: 300, overflow: 'auto' }}
+        scroll={{ x: true }}
         pagination={false}
       />
     </Modal>