Merge pull request #1470 from alibaba/table-list-hide-table

feat: tableList 增加 hidetableWhenNoData
alibaba · Jan 24, 2024 · 618bc0e · 618bc0e
2 parents 0764d60 + 4894267
commit 618bc0e
Showing 1 changed file with 26 additions and 17 deletions.
diff --git a/packages/form-render/src/widgets/listTable/index.tsx b/packages/form-render/src/widgets/listTable/index.tsx
@@ -15,6 +15,10 @@ interface ListTableProps {
   delConfirmProps: any;
   renderCore: any;
   rootPath: any;
+  /*
+   * 没有数据时是否隐藏表格
+   */
+  hideTableWhenNoData?: boolean;
   [key: string]: any;
 };
 
@@ -57,6 +61,7 @@ const TableList: React.FC<ListTableProps> = (props) => {
     hideMove,
     hideAdd,
     hideOperate,
+    hideTableWhenNoData,
 
     addItem,
     copyItem,
@@ -141,19 +146,19 @@ const TableList: React.FC<ListTableProps> = (props) => {
       ...otherActionColumnProps,
       render: (_, field) => (
         <Form.Item>
-          <Space className='fr-list-item-operate' split={operateBtnType !== 'icon' && <Divider type='vertical'/>}>
+          <Space className='fr-list-item-operate' split={operateBtnType !== 'icon' && <Divider type='vertical' />}>
             {!hideMove && (
               <>
-                <FButton 
+                <FButton
                   disabled={field.name === 0}
                   onClick={() => moveItem(field.name, field.name - 1)}
-                  icon={<ArrowUpOutlined/>}
+                  icon={<ArrowUpOutlined />}
                   {...moveUpBtnProps}
                 />
-                <FButton 
+                <FButton
                   disabled={field.name === fields.length - 1}
                   onClick={() => moveItem(field.name, field.name + 1)}
-                  icon={<ArrowDownOutlined/>}
+                  icon={<ArrowDownOutlined />}
                   {...moveDownBtnProps}
                 />
               </>
@@ -164,16 +169,16 @@ const TableList: React.FC<ListTableProps> = (props) => {
                 {...delConfirmProps}
               >
                 <FButton
-                  icon={<CloseOutlined/>}
+                  icon={<CloseOutlined />}
                   btnType={operateBtnType}
                   {...deleteBtnProps}
                 />
               </Popconfirm>
             )}
             {!hideCopy && (
-              <FButton 
+              <FButton
                 onClick={() => handleCopy(field.name)}
-                icon={<CopyOutlined/>}
+                icon={<CopyOutlined />}
                 {...copyBtnProps}
               />
             )}
@@ -183,17 +188,21 @@ const TableList: React.FC<ListTableProps> = (props) => {
     });
   }
 
+  const showTable = fields.length > 0 ? true : !hideTableWhenNoData;
+
   return (
     <div className={classnames('fr-table-list', { 'fr-table-list-no-popover': !islidatePopover })}>
-      <Table
-        size='middle'
-        scroll={{ x: 'max-content' }}
-        style={{ marginBottom: '12px'}}
-        {...retProps}
-        columns={columns}
-        dataSource={fields}
-        pagination={paginationConfig}
-      />
+      {showTable && (
+        <Table
+          size='middle'
+          scroll={{ x: 'max-content' }}
+          style={{ marginBottom: '12px' }}
+          {...retProps}
+          columns={columns}
+          dataSource={fields}
+          pagination={paginationConfig}
+        />
+      )}
       {(!schema.max || fields.length < schema.max) && !hideAdd && (
         <Button
           icon={<PlusOutlined />}