antd-design-vue 表格 自适应高度
时间: 2023-09-06 22:04:12 浏览: 222
Vue 自适应高度表格的实现方法
要实现 antd-design-vue 表格的自适应高度,可以通过以下步骤:
1. 首先,我们需要在表格组件的外层容器中设置固定的高度或者最小高度,例如设置 `style="height: 300px;"`。这个高度可以根据实际需求进行调整。
2. 然后,在表格组件中,通过设置 `scroll` 属性来实现自适应高度。`scroll` 属性是一个对象,其中包括 `x` 和 `y` 两个属性。我们只需要设置 `y` 属性即可。
例如:
```
<template>
<div style="height: 300px;">
<a-table :columns="columns" :data-source="dataSource" :scroll="{ y: 'calc(100vh - 380px)' }"></a-table>
</div>
</template>
```
在上述代码中,我们使用 `calc()` 函数来计算表格的高度,其中 `100vh` 表示窗口可视区域的高度,`380px` 表示表格外部容器的上下边距和分页器等组件的高度。根据实际情况,你可以调整这个计算表达式。
通过以上步骤,我们可以实现 antd-design-vue 表格的自适应高度。当表格内容超过设置的高度时,会出现纵向滚动条,从而确保表格的高度适应容器大小。
阅读全文