antd vue table设置高度当数据不足以撑满表格高度时分页器也不会发生位移
时间: 2024-02-27 18:56:45 浏览: 162
在antd vue中,可以通过设置Table组件的scroll属性来实现表格高度的设置。scroll属性可以指定表格的高度和宽度,同时还可以控制滚动条的出现与否。如果数据不足以撑满表格高度时,分页器也不会发生位移。
以下是一个示例代码:
```
<template>
<div>
<a-table :columns="columns" :data-source="dataSource" :scroll="{y: 300}">
<span slot="title">Title</span>
</a-table>
</div>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: 'Name',
dataIndex: 'name'
},
{
title: 'Age',
dataIndex: 'age'
},
{
title: 'Address',
dataIndex: 'address'
}
],
dataSource: [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park'
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park'
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park'
}
]
};
}
};
</script>
```
在上面的代码中,我们通过设置scroll属性来将表格的高度设置为300像素。这样,即使数据不足以撑满表格高度,分页器也不会发生位移。
阅读全文