官方地址:1x.antdv.com/components/…
使用:
<div ref="spaceRef"></div>
<a-table
bordered
size="small"
:scroll="tableScroll"
:pagination="false"
:loading="loading"
:columns="tableColumns"
:data-source="dataList">
<template #bodyCell="{ text, _, column }">
<template v-if="column.dataIndex === 'action'">
<a>action</a>
</template>
</template>
</a-table>
tableScroll: { x: "2000px", y: undefined },//指定宽度,高度待定
获取滚动区域的高度:
calcScrollHeight() {
const rect = this.$refs.spaceRef.getBoundingClientRect();
this.tableScroll.y = window.innerHeight - rect.top - 135;
},
配置文件(固定操作栏):
fixed属性固定列
{
fixed: "right",
width: '160px',
title: "操作",
scopedSlots: {
customRender: "action"
}
}
相关属性:
getBoundingClientRect():获取元素位置,这个方法没有参数。用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。
window.innerHeight:浏览器窗口的视口(viewport)高度(以像素为单位);如果有水平滚动条,也包括滚动条高度。
rect.top: 元素上边到视窗上边的距离
scroll: 设置横向或纵向滚动,也可以指定滚动区域的宽高
fixed: 列是否固定,可选 true(等效于 left) 'left' 'right'
表格的数据错位及出现白色垂直空隙问题:
1.指定固定列的宽度(fixed) width
2.留一列固定列不设宽度以适应弹性布局
3.检查一下是否有超长连续字段破坏布局
4.非固定列宽度之和不要超过 scroll.x