fix: table auto height #5101
fix: table auto height #5101
Conversation
|
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
packages/effects/common-ui/src/components/page/page.vueOops! Something went wrong! :( ESLint: 9.16.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/node_modules/@vben/eslint-config/dist/index.mjs' imported from /eslint.config.mjs WalkthroughThe changes in the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
packages/effects/common-ui/src/components/page/page.vue (2)
Line range hint
53-56: Consider replacing setTimeout with nextTick for more reliable timing.The current implementation uses a 30ms setTimeout to set
shouldAutoHeight, which might still be too short for very quick AJAX responses. Using nextTick would be more reliable as it ensures proper DOM updates.async function calcContentHeight() { if (!autoContentHeight) { return; } await nextTick(); headerHeight.value = headerRef.value?.offsetHeight || 0; footerHeight.value = footerRef.value?.offsetHeight || 0; - setTimeout(() => { + await nextTick(); shouldAutoHeight.value = true; - }, 30); }
41-44: Add error handling for height calculations.The height calculation lacks error handling for cases where the CSS variable might be undefined or when height calculations fail.
const contentStyle = computed<StyleValue>(() => { if (autoContentHeight) { + try { + const cssVar = getComputedStyle(document.documentElement) + .getPropertyValue(CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT); + if (!cssVar) { + console.warn(`CSS variable ${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT} not found`); + return {}; + } return { height: `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px)`, overflowY: shouldAutoHeight.value ? 'auto' : 'unset', }; + } catch (error) { + console.error('Failed to calculate content height:', error); + return {}; + } } return {}; });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
packages/effects/common-ui/src/components/page/page.vue(1 hunks)
🔇 Additional comments (1)
packages/effects/common-ui/src/components/page/page.vue (1)
42-42: LGTM! The height calculation change addresses the reported issues.
The unconditional height calculation using CSS variables should resolve the table height issues when AJAX responses are quick (<100ms) or when switching tabs.
2 participants
Description
修复在表格已设置自动调整高度时，偶发性地出现高度计算错误的问题。
fix #5035
fix #5015
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.