antdvue table表头固定,y方向滑动

1,169 阅读1分钟

table表头固定,方便一页内展示大量数据

方法一: 设置 :scroll="{ y: 240 }" 设置了2个 table,1个table放表头, 1个table放表格内容 缺点: columns 列表中的Object必须填写width 属性

需要指定 column 的 width 属性,否则列头和内容可能不对齐。如果指定 width 不生效或出现白色垂直空隙,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局。

方法二:使用 position的粘性定位 sticky

/*show-some 决定是否具备固定表头*/
.show-some :deep(.ant-table-content) {
    /*表格外层 css样式*/
    max-height: v-bind(tabHei);
    overflow-y: auto;
    
    /*表头 定位设置为粘性定位*/
    thead {
	position: sticky;
        top: 0;
        z-index: 1;
    }
		
    /*滚动条样式*/
    &::-webkit-scrollbar {
	width: 7px;
    }
				
    &::-webkit-scrollbar-thumb {
	background: #d9d9d9;
    }
}