소스 검색

style: 优化超出部分隐藏实现

xyh 2 년 전
부모
커밋
8e01d79759
3개의 변경된 파일9개의 추가작업 그리고 11개의 파일을 삭제
  1. 7 5
      packages/app/src/components/table/BodyTr.tsx
  2. 1 1
      packages/app/src/components/table/HeaderTh.tsx
  3. 1 5
      packages/app/src/components/table/index.css

+ 7 - 5
packages/app/src/components/table/BodyTr.tsx

@@ -65,7 +65,7 @@ const BodyTr: FC<Props> = function({
               className={classNames({
                 'ld-table-fixed-right ld-table-right-fixed-shadow': fixed === 'right',
                 'ld-table-fixed-left ld-table-left-fixed-shadow': fixed === 'left',
-                'ld-table-ellipsis': !fixed && ((enableEllipsis && ellipsis !== false) || ellipsis),
+                'ld-table-ellipsis': (enableEllipsis && ellipsis !== false) || ellipsis,
               })}
               style={{
                 width: column.getSize(),
@@ -73,10 +73,12 @@ const BodyTr: FC<Props> = function({
                 ...fixedStyle,
               }}
             >
-              {flexRender(
-                column.columnDef.cell,
-                getContext(),
-              )}
+              <span>
+                {flexRender(
+                  column.columnDef.cell,
+                  getContext(),
+                )}
+              </span>
             </td>
           );
         })}

+ 1 - 1
packages/app/src/components/table/HeaderTh.tsx

@@ -71,7 +71,7 @@ const HeaderTh: FC<Props> = function({
       className={classNames('ld-table-head-th', {
         'ld-table-fixed-right ld-table-right-fixed-shadow': fixed === 'right',
         'ld-table-fixed-left ld-table-left-fixed-shadow': fixed === 'left',
-        'ld-table-ellipsis': !fixed && ((enableEllipsis && ellipsis !== false) || ellipsis),
+        'ld-table-ellipsis': (enableEllipsis && ellipsis !== false) || ellipsis,
       })}
     >
       {header.isPlaceholder

+ 1 - 5
packages/app/src/components/table/index.css

@@ -29,11 +29,7 @@
 }
 
 .ld-table-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  & .ld-table-head-th-info span {
+  & span {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;