解决冲突

ShuyunFF2E · Jan 10, 2024 · 7513026 · 7513026
2 parents a66d296 + 68caad7
commit 7513026
Showing 7 changed files with 204 additions and 161 deletions.
diff --git a/src/components/c-table/css/business.less b/src/components/c-table/css/business.less
@@ -302,8 +302,8 @@
 
   // 表格支持配置列的展示和隐藏
   &.@{tablePrefixCls}-config-column {
-    tr td:last-child,
-    tr th:last-child {
+    tbody tr td:last-child,
+    thead tr th:nth-last-of-type(-n+1) {
       padding-right: 40px;
     }
   }
@@ -376,21 +376,29 @@
       }
     }
   }
+
+  // 表格不展示纵向滚动条
+  &.@{tablePrefixCls}-no-scroll {
+    .@{tablePrefixCls}-container {
+      height: auto;
+    }
+  }
 }
 
 .@{tablePrefixCls}-tooltip {
   min-width: 236px;
-  max-height: 300px;
   overflow: auto;
   padding: 16px;
+  box-shadow: 0 4px 12px 0 rgba(0,0,0,0.1), 0 0 1px 0 rgba(0,0,0,0.3) !important;
+  border-radius: 3px;
 
   &-content {
     display: flex;
     flex-direction: column;
     gap: 12px;
 
     > li {
-      width: 114px;
+      width: 180px;
       .text-overflow-ellipsis;
 
       .@{prefix}-checkbox-text {

diff --git a/src/components/c-table/demos/goods-table.md b/src/components/c-table/demos/goods-table.md
@@ -200,7 +200,7 @@ class CTableDemo extends Component {
       dataIndex: 'operate',
       align: 'right',
       width: 140,
-      // fixed: 'right',
+      fixed: 'right',
       render: (_, row) => {
         return row.skus && row.skus.length ? (
           <Button
@@ -287,15 +287,16 @@ class CTableDemo extends Component {
 
   render() {
     return (
-      <div className="cloud-table-goods">
+      <div className="cloud-table-goods" style={{ height: 400, overflow: 'auto' }}>
         <Button style={{ marginBottom: 20 }} onClick={this.onExpandAll}>{this.state.isExpandAll ? '展开全部' : '收起全部'}</Button>
         <CTable
           supportConfigColumn
           defaultShowColumns={this.state.defaultShowColumns}
           disabledConfigColumns={this.columns.slice(0, 2).map(item => item.dataIndex)}
           hideConfigColumns={['operate']}
           ref={this.tableRef}
-          style={{ width: '100%', height: 400 }}
+          noScroll
+          // stickyFooter
           supportExpend
           supportTree
           supportCheckbox

diff --git a/src/components/c-table/index.js b/src/components/c-table/index.js
@@ -81,7 +81,7 @@ class CTable extends Component {
       isLoading: false,
       filterValue: [],
       sortParams: {},
-      columnConfigStyle: {},
+      // columnConfigStyle: {},
     };
     this.column = new Column(this);
   }
@@ -113,7 +113,7 @@ class CTable extends Component {
       window.addEventListener('resize', this.onResize());
     }
 
-    this.setColumnConfigStyle();
+    // this.setColumnConfigStyle();
   }
 
   componentDidUpdate(prevProps) {
@@ -331,28 +331,28 @@ class CTable extends Component {
     });
   };
 
-  setColumnConfigStyle = () => {
-    setTimeout(() => {
-      if (this.props.supportConfigColumn) {
-        const modalEles = document.querySelectorAll(`.${prefixCls}-modal-body`);
-        if (modalEles?.length) {
-          const currentModalEle = modalEles[modalEles.length - 1];
-          const { bottom: modalBottom } = currentModalEle.getClientRects()[0];
-
-          const { bottom: tableConfigBtnBottom } = this.ref.current?.querySelector(`.${prefixCls}-table-config-icon`)?.getClientRects()?.[0];
-
-          console.log(modalBottom, tableConfigBtnBottom);
-          if (modalBottom && tableConfigBtnBottom && modalBottom -  tableConfigBtnBottom > 0) {
-            this.setState({
-              columnConfigStyle: {
-                maxHeight: modalBottom -  tableConfigBtnBottom
-              }
-            })
-          }
-        }
-      }
-    }, 1000)
-  }
+  // setColumnConfigStyle = () => {
+  //   setTimeout(() => {
+  //     if (this.props.supportConfigColumn) {
+  //       const modalEles = document.querySelectorAll(`.${prefixCls}-modal-body`);
+  //       if (modalEles?.length) {
+  //         const currentModalEle = modalEles[modalEles.length - 1];
+  //         const { bottom: modalBottom } = currentModalEle.getClientRects()[0];
+  //
+  //         const { bottom: tableConfigBtnBottom } = this.ref.current?.querySelector(`.${prefixCls}-table-config-icon`)?.getClientRects()?.[0];
+  //
+  //         console.log(modalBottom, tableConfigBtnBottom);
+  //         if (modalBottom && tableConfigBtnBottom && modalBottom -  tableConfigBtnBottom > 0) {
+  //           this.setState({
+  //             columnConfigStyle: {
+  //               maxHeight: modalBottom -  tableConfigBtnBottom
+  //             }
+  //           })
+  //         }
+  //       }
+  //     }
+  //   }, 1000)
+  // }
 
   /**
    * 表格翻页后，滚动到顶部
@@ -707,6 +707,17 @@ class CTable extends Component {
     }, 500);
   };
 
+  getScroll = () => {
+    const { scroll, maxHeight, noScroll } = this.props;
+    if (scroll) {
+      return scroll;
+    }
+    if (noScroll) {
+      return { x: '100%' };
+    }
+    return { x: '100%', y: maxHeight || '100%' };
+  };
+
   /**
    * 表格数据为空模板
    * @returns {*}
@@ -808,6 +819,7 @@ class CTable extends Component {
       sticky,
       stickyFooter,
       supportConfigColumn,
+      noScroll,
     } = this.props;
     const {
       data,
@@ -817,9 +829,10 @@ class CTable extends Component {
       pageOpts,
       selectedNodeList,
       isLoading,
-      columnConfigStyle,
+      // columnConfigStyle,
     } = this.state;
     const { pageNum, pageSize, totals } = pageOpts;
+    const scroll = this.getScroll();
 
     return (
       <div className={`${tablePrefixCls}-container`} style={style} ref={ref}>
@@ -847,10 +860,11 @@ class CTable extends Component {
               [`${tablePrefixCls}-support-resize`]: supportResizeColumn, // 表格列拉伸
               [`${tablePrefixCls}-full-column`]: supportFullColumn, // 表格通栏
               [`${tablePrefixCls}-config-column`]: supportConfigColumn, // 表格通栏
+              [`${tablePrefixCls}-no-scroll`]: noScroll, // 无纵向滚动条的表格
             },
             className,
           )}
-          style={{
+          style={noScroll ? {} : {
             height: `calc(100% - ${
               hideEmptyFooter && !totals ? 0 : footerHeight
             }px)`,
@@ -863,7 +877,7 @@ class CTable extends Component {
             data={data}
             expandIconColumnIndex={expandIconColumnIndex}
             sticky={sticky}
-            scroll={{ x: '100%', y: maxHeight || '100%' }}
+            scroll={scroll}
             expandable={getExpandableConfig({ ...this.props })}
             emptyText={emptyTpl()}
             rowKey={rowKey}
@@ -906,7 +920,7 @@ class CTable extends Component {
                 : undefined
             }
           />
-          {loadingTpl(isLoading) || (
+          {loadingTpl(isLoading || loadingOpts.loading) || (
             <Loading
               className={`${tablePrefixCls}-loading-layer`}
               loading={isLoading}
@@ -971,9 +985,15 @@ class CTable extends Component {
             placement="bottom-right"
             className={`${tablePrefixCls}-tooltip`}
             content={this.renderConfig()}
-            overlayStyle={columnConfigStyle}
+            overlayStyle={{
+              maxHeight: 466,
+              top: 40,
+              right: 1,
+              left: 'auto',
+            }}
+            containerEle={this.ref.current}
           >
-            <span className={`${tablePrefixCls}-config-icon`} style={isLoading ? { zIndex: -1 } : {}}>
+            <span className={`${tablePrefixCls}-config-icon`} style={isLoading || loadingOpts.loading ? { zIndex: -1 } : {}}>
               <Icon type="config" />
             </span>
           </Tooltip>