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;
}
}