antd vue动态表格scroll
时间: 2023-11-27 07:47:08 浏览: 105
根据提供的引用内容,可以得知该问题是关于如何使用Antd Vue组件库中的动态表格scroll的。下面是一个简单的例子,演示如何使用Antd Vue的Table组件实现动态表格scroll:
```vue
template>
<a-table :columns="columns" :data-source="dataList" :scroll="{ x: '100%', y: `calc(100vh - ${tableTop+280+'px'})` }" :pagination="false">
<template slot="title">
<div class="table-title">Table Title</div>
</template>
</a-table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address', },
],
dataList: [
{
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',
},
// ... more data
],
tableTop: 0,
tableList: [],
};
},
mounted() {
const a = document.querySelector('.ant-table-header');
this.tableList = [a.clientHeight, a.clientHeight];
this.tableTop = this.tableList[0];
},
watch: {
columns() {
setTimeout(() => {
const a = document.querySelector('.ant-table-header');
this.tableList.push(a.clientHeight);
this.tableList.splice(0, 1);
this.tableTop = this.tableList[1];
}, 10);
},
},
};
</script>
```
在上面的代码中,我们使用了Antd Vue的Table组件,并设置了columns和dataList属性来定义表格的列和数据。我们还设置了scroll属性来控制表格的滚动,其中x属性设置为'100%',表示表格宽度自适应,y属性设置为`calc(100vh - ${tableTop+280+'px'})`,表示表格高度自适应。我们还使用了mounted和watch属性来动态计算表头高度和更新表格高度。
阅读全文