表格固定头和列以展示更多的数据

253 阅读1分钟

官方地址: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'

image-20221114142119567.png

表格的数据错位及出现白色垂直空隙问题:

1.指定固定列的宽度(fixed) width

2.留一列固定列不设宽度以适应弹性布局

3.检查一下是否有超长连续字段破坏布局

4.非固定列宽度之和不要超过 scroll.x