From 2146d18045db8591709829bd10f63027c3f51ddf Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 20 Jul 2022 13:30:34 +0800 Subject: [PATCH] style: fix Table tree data ellipsis style problem (#36608) close #36583 --- .../__snapshots__/demo-extend.test.ts.snap | 703 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.js.snap | 703 ++++++++++++++++++ components/table/demo/tree-table-ellipsis.md | 136 ++++ components/table/style/index.less | 17 +- 4 files changed, 1551 insertions(+), 8 deletions(-) create mode 100644 components/table/demo/tree-table-ellipsis.md diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap index e529e2147b..ff3bacf76e 100644 --- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -26569,6 +26569,709 @@ Array [ ] `; +exports[`renders ./components/table/demo/tree-table-ellipsis.md extend context correctly 1`] = ` +Array [ +
+
+ Fixed first column: +
+
+ +
+
, +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ 		+ + Name + + + Age + + Address +
+ + + + + 60 + + New York No. 1 Lake Park +
+ + + + + 42 + + New York No. 2 Lake Park +
+ + + + + 30 + + New York No. 3 Lake Park +
+ + + + + 16 + + New York No. 3 Lake Park +
+ + + + + 72 + + London No. 1 Lake Park +
+ + + + + 42 + + London No. 2 Lake Park +
+ + + + + 25 + + London No. 3 Lake Park +
+ + + + + 18 + + London No. 4 Lake Park +
+ + + + + 32 + + Sidney No. 1 Lake Park +
+
+
+
+
    +
  • + +
    • +
  • + + 1 + +
    • +
  • + +
    • +
+
+
+
, +] +`; + exports[`renders ./components/table/demo/virtual-list.md extend context correctly 1`] = `
+
+ Fixed first column: +
+
+ +
+
, +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ 		+ + Name + + + Age + + Address +
+ + + + + 60 + + New York No. 1 Lake Park +
+ + + + + 42 + + New York No. 2 Lake Park +
+ + + + + 30 + + New York No. 3 Lake Park +
+ + + + + 16 + + New York No. 3 Lake Park +
+ + + + + 72 + + London No. 1 Lake Park +
+ + + + + 42 + + London No. 2 Lake Park +
+ + + + + 25 + + London No. 3 Lake Park +
+ + + + + 18 + + London No. 4 Lake Park +
+ + + + + 32 + + Sidney No. 1 Lake Park +
+
+
+
+
    +
  • + +
    • +
  • + + 1 + +
    • +
  • + +
    • +
+
+
+
, +] +`; + exports[`renders ./components/table/demo/virtual-list.md correctly 1`] = `
{ + const [fixed, setFixed] = useState(true); + + const columns: ColumnsType = [ + { + title: 'Name', + dataIndex: 'name', + key: 'name', + width: '30%', + ellipsis: true, + fixed, + }, + { + title: 'Age', + dataIndex: 'age', + key: 'age', + width: '12%', + }, + { + title: 'Address', + dataIndex: 'address', + key: 'address', + }, + ]; + + return ( + <> + + Fixed first column: + + + + ); +}; + +export default App; +``` diff --git a/components/table/style/index.less b/components/table/style/index.less index 47777ea34a..a51f6c5836 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -482,6 +482,12 @@ &-row-expand-icon-cell { text-align: center; + + .@{table-prefix-cls}-row-expand-icon { + display: inline-flex; + float: none; + vertical-align: sub; + } } &-row-indent { @@ -492,7 +498,7 @@ &-row-expand-icon { .operation-unit(); position: relative; - display: inline-flex; + float: left; box-sizing: border-box; width: @expand-icon-size; height: @expand-icon-size; @@ -500,7 +506,6 @@ color: inherit; line-height: ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2)) * 2 + @border-width-base * 3; - vertical-align: -2.5px; background: @table-expand-icon-bg; border: @border-width-base @border-style-base @table-border-color; border-radius: @border-radius-base; @@ -561,14 +566,10 @@ } .@{table-prefix-cls}-row-indent + & { + margin-top: ((@font-size-base * @line-height-base - @border-width-base * 3) / 2) - + ceil(((@font-size-sm * 1.4 - @border-width-base * 3) / 2)); margin-right: @padding-xs; } - - + .@{table-prefix-cls}-cell-content { - display: inline-block !important; - width: calc(100% - (@expand-icon-size + @padding-xs)); - vertical-align: top; - } } tr&-expanded-row {