Post

表头固定+自适应

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.