fix(data-table): height incorrect when set min-height in empty state, closes #5108 (#5110)

Co-authored-by: 07akioni <07akioni2@gmail.com>
This commit is contained in:
吉仔 2023-12-21 02:44:12 +08:00 committed by GitHub
parent 47d7271a10
commit 6913906e08
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 10 additions and 4 deletions

View File

@ -19,6 +19,7 @@
- Fix `n-drawer`'s `on-mask-click` may be called multiple times.
- Fix `n-tree`'s `data` When the data source 'data' switches several times according to a certain scene, some logic of animation processing can cause errors in rendering the displayed data, closes [#5217](https://github.com/tusen-ai/naive-ui/issues/5217)
- 修复 `n-radio` value 值取消更新后input 原生 checked 值未更新,关闭 [#5184](https://github.com/tusen-ai/naive-ui/issues/5184)
- Fix `n-data-table` height incorrect when set `min-height` in empty statecloses [#5108](https://github.com/tusen-ai/naive-ui/issues/5108).
### Features

View File

@ -19,6 +19,7 @@
- 修复 `n-drawer``on-mask-click` 属性可能被触发多次
- 修复 `n-tree` 属性 `data` 当数据源`data`按一定场景多次发生切换时,动画处理的一些逻辑会导致渲染展示的数据出错,关闭 [#5217](https://github.com/tusen-ai/naive-ui/issues/5217)
- 修复 `n-radio` value 值取消更新后input 原生 checked 值未更新,关闭 [#5184](https://github.com/tusen-ai/naive-ui/issues/5184)
- 修复 `n-data-table` 空表格在设置 `min-height` 时高度不正确,关闭 [#5108](https://github.com/tusen-ai/naive-ui/issues/5108)
### Features

View File

@ -1,13 +1,15 @@
# Height debug
```html
set max-height<n-switch v-model:value="setMaxHeightRef" /> set
min-height<n-switch v-model:value="setMinHeightRef" />
<n-data-table
:columns="columns"
:data="data"
:pagination="pagination"
:scroll-x="1800"
:max-height="500"
:min-height="300"
:max-height="setMaxHeightRef ? 500 : undefined"
:min-height="setMinHeightRef ? 300 : undefined"
/>
```
@ -34,7 +36,8 @@ export default defineComponent({
data: [],
columns,
pagination: { pageSize: 10 },
height: ref(200)
setMaxHeightRef: ref(false),
setMinHeightRef: ref(false)
}
}
})

View File

@ -11,6 +11,7 @@ import type {
import { dataTableInjectionKey } from './interface'
export default defineComponent({
name: 'MainTable',
setup () {
const {
mergedClsPrefixRef,

View File

@ -543,7 +543,7 @@ export default defineComponent({
ref="scrollbarInstRef"
scrollable={scrollable || isBasicAutoLayout}
class={`${mergedClsPrefix}-data-table-base-table-body`}
style={this.bodyStyle}
style={!this.empty ? this.bodyStyle : undefined}
theme={mergedTheme.peers.Scrollbar}
themeOverrides={mergedTheme.peerOverrides.Scrollbar}
contentStyle={contentStyle}