style: table dropdown add maxheight, close #1647 (#1829)

* style: table dropdown add maxheight, close #1647
DouyinFE · Sep 14, 2023 · da9da91 · da9da91
1 parent 1394ae4
commit da9da91
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/packages/semi-foundation/table/table.scss b/packages/semi-foundation/table/table.scss
@@ -620,4 +620,11 @@ $module: #{$prefix}-table;
     }
 }
 
+.#{$module}-column-filter-dropdown {
+    .#{$prefix}-dropdown-menu {
+        max-height: $height-table_column_filter_dropdown;
+        overflow-y: auto;
+    }
+}
+
 @import './rtl.scss';
diff --git a/packages/semi-foundation/table/variables.scss b/packages/semi-foundation/table/variables.scss
@@ -42,6 +42,7 @@ $width-table_cell_fixed_left_last: 1px; // 表格左上角单元格底部描边
 $width-table_cell_fixed_right_first: 1px; // 表格左上角单元格右侧描边宽度
 $width-table_react_resizable_handle: 9px; // 表格伸缩列调节热区宽度
 $height-table_pagination_outer_min: 60px; // 表格分页器高度
+$height-table_column_filter_dropdown: 290px; // 表格过滤筛选列表最大高度
 
 
 // Color no need to change

diff --git a/packages/semi-ui/table/ColumnFilter.tsx b/packages/semi-ui/table/ColumnFilter.tsx
@@ -122,7 +122,7 @@ function renderDropdown(props: RenderDropdownProps = {}, nestedElem: React.React
     }
 
     return (
-        <Dropdown {...dropdownProps} key={`Dropdown_level_${level}`}>
+        <Dropdown {...dropdownProps} key={`Dropdown_level_${level}`} className={`${cssClasses.PREFIX}-column-filter-dropdown`}>
             {nestedElem}
         </Dropdown>
     );