表头固定+自适应
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<a-table
size="middle"
:pagination="pagination"
:columns="columns"
:data-source="data"
:rowClassName="rowClassName"
:scroll="{ y: `calc(100vh - 1.197917rem)` }" //vh + rem
:rowKey="
(record, index) => {
return index;
}
"
@change="onChanges"
>
另外需要根据table的大小先固定外层的大小,具体要根据表格大小来定具体大小
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.ant-table-wrapper {
margin: 20px 20px 0;
height: calc(100% - 20px);
.ant-spin-nested-loading {
height: 100%;
.ant-spin-container {
height: 100%;
.ant-table {
height: calc(100% - 36px);
}
}
}
.ant-table-body {
max-height: 700px;
overflow-y: scroll;
width: 100%;
// &::-webkit-scrollbar:horizontal {
// height: 11px;
// }
}
}
This post is licensed under CC BY 4.0 by the author.