diff --git a/.changeset/kind-bees-move.md b/.changeset/kind-bees-move.md
new file mode 100644
index 000000000..6f68bd832
--- /dev/null
+++ b/.changeset/kind-bees-move.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+fix(table): 修复分页器被遮挡的问题 (#3040)
diff --git a/.changeset/silly-mirrors-turn.md b/.changeset/silly-mirrors-turn.md
new file mode 100644
index 000000000..ea0dc90aa
--- /dev/null
+++ b/.changeset/silly-mirrors-turn.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/pagination": minor
+---
+
+feat(pagination): Add pageSizeOptionsOverlay api (#3040)
diff --git a/packages/ui/pagination/hi-docs.config.mdx b/packages/ui/pagination/hi-docs.config.mdx
index db36cc2ed..e67c460cb 100644
--- a/packages/ui/pagination/hi-docs.config.mdx
+++ b/packages/ui/pagination/hi-docs.config.mdx
@@ -17,3 +17,14 @@
## Props
+
+### PopperOverlayProps
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| -------------- | ---------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| className | 弹层类名 | string | - | - |
+| matchWidth | 自动计算匹配吸附元素的宽度与其一致 | boolean | true \| false | true |
+| placement | 相对吸附元素的位置 | PopperPlacementEnum | "top" \| "bottom" \| "right" \| "left" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "right-start" \| "right-end" \| "left-start" \| "left-end" \| "auto" \| "auto-start" \| "auto-end" | "bottom-start" |
+| container | 指定 portal 的容器 | HTMLElement | - | - |
+| disabledPortal | 禁用 portal | boolean | true \| false | false |
+| arrow | 是否展示箭头 | boolean | true \| false | false |
diff --git a/packages/ui/pagination/src/DefaultPagination.tsx b/packages/ui/pagination/src/DefaultPagination.tsx
index cf70d2859..6b1e18ffc 100644
--- a/packages/ui/pagination/src/DefaultPagination.tsx
+++ b/packages/ui/pagination/src/DefaultPagination.tsx
@@ -10,6 +10,7 @@ import { PageJumper } from './PageJumper'
import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state'
import { useLatestCallback } from '@hi-ui/use-latest'
import { isFunction } from '@hi-ui/type-assertion'
+import { PopperOverlayProps } from '@hi-ui/popper'
const _role = 'pagination'
const _prefix = getPrefixCls(_role)
@@ -36,6 +37,7 @@ export const DefaultPagination = forwardRef
) : null}
@@ -252,7 +255,10 @@ export interface PaginationProps extends HiBaseHTMLProps<'div'> {
* 指定每页可以显示多少条
*/
pageSizeOptions?: number[]
-
+ /**
+ * 下拉框选择项浮层配置
+ */
+ pageSizeOptionsOverlay?: PopperOverlayProps
/**
* 快速跳转时触发
*/
diff --git a/packages/ui/pagination/src/PageOption.tsx b/packages/ui/pagination/src/PageOption.tsx
index c95c62685..7ccc230f0 100644
--- a/packages/ui/pagination/src/PageOption.tsx
+++ b/packages/ui/pagination/src/PageOption.tsx
@@ -2,6 +2,7 @@ import React from 'react'
import { cx, getPrefixCls } from '@hi-ui/classname'
import { Select } from '@hi-ui/select'
import { __DEV__ } from '@hi-ui/env'
+import { PopperOverlayProps } from '@hi-ui/popper'
const _role = 'pagination'
const _prefix = getPrefixCls(_role)
@@ -9,6 +10,7 @@ const _prefix = getPrefixCls(_role)
export const PageOption: React.FC = ({
prefixCls = _prefix,
pageSizeOptions,
+ pageSizeOptionsOverlay,
onPageSizeChange,
pageSize,
}) => {
@@ -23,9 +25,7 @@ export const PageOption: React.FC = ({
value={pageSize}
clearable={false}
onChange={onPageSizeChange as (value: React.ReactText) => void}
- overlay={{
- disabledPortal: true,
- }}
+ overlay={pageSizeOptionsOverlay}
/>
)
}
@@ -47,6 +47,10 @@ export interface PageOptionProps {
* 指定每页可以显示多少条
*/
pageSizeOptions: { id: React.ReactText; title: string }[]
+ /**
+ * 下拉框选择项浮层配置
+ */
+ pageSizeOptionsOverlay?: PopperOverlayProps
/**
* 每页条数
*/
diff --git a/packages/ui/table/stories/pagination.stories.tsx b/packages/ui/table/stories/pagination.stories.tsx
index fefe6ea9e..b553f5ca1 100644
--- a/packages/ui/table/stories/pagination.stories.tsx
+++ b/packages/ui/table/stories/pagination.stories.tsx
@@ -145,6 +145,11 @@ export const Pagination = () => {
showJumper: true,
pageSize: paginationState.pageSize,
pageSizeOptions: [5, 10, 20],
+ pageSizeOptionsOverlay: {
+ // 该参数用来配置分页器下拉框的挂载容器,默认是 body,设置为 true 时,会自动寻找最近的元素作为父节点
+ // 在浏览器原生的全屏模式中,需要将此值设成 true,否则无法正常显示,若无需在全屏状态下使用,则不需要做任何处理
+ disabledPortal: true,
+ },
onPageSizeChange: (pageSize) => {
setPaginationState((prev) => ({
...prev,
diff --git a/packages/ui/table/stories/scrollbar.stories.tsx b/packages/ui/table/stories/scrollbar.stories.tsx
index 0283e86c8..cb40987b6 100644
--- a/packages/ui/table/stories/scrollbar.stories.tsx
+++ b/packages/ui/table/stories/scrollbar.stories.tsx
@@ -363,9 +363,9 @@ export const Scrollbar = () => {
zIndex: 9,
settings: {
// 垂直滑动时,让横向滚动条一直显示在容器底部
- scrollbarXStickToBottom: true,
+ // scrollbarXStickToBottom: true,
// 横向滚动条距离底部的距离
- scrollbarXStickToBottomGap: 20,
+ // scrollbarXStickToBottomGap: 20,
},
}
}