Ant 表格之修改样式和添加滚动条

 HTML

1 <a-table
2   :pagination="pagination"
3   :columns="columns"
4   :data-source="tableList"
5   align="center"
6   :rowKey="(record) => record.id"
7   :scroll="{ y: 'calc(100vh - 590px)' }"
8 >
9 a-table>

 TS

 1   columns = [
 2     {
 3       title: "表头标题1",
 4       dataIndex: "first",
 5       key: "first",
 6     },
 7     {
 8       title: "表头标题2",
 9       dataIndex: "second",
10       key: "second",
11     },
12     {
13       title: "表头标题3",
14       dataIndex: "third",
15       key: "third",
16     },
17   ];
18   tableList = [
19     {
20       id: 1,
21       first: "第一行第一列",
22       second: "第一行第二列",
23       third: "第一行第三列",
24     },
25     {
26       id: 2,
27       first: "第二行第一列",
28       second: "第二行第二列",
29       third: "第二行第三列",
30     },
31   ];
32   pagination = {
33     defaultPageSize: 5, //默认的每页条数
34     total: this.tableList.length, //数据总数
35     size: "middle", //分页尺寸
36     showSizeChanger: true, //是否可以改变 pageSize
37     pageSizeOptions: ["5", "10", "20", "30"], //指定每页可以显示多少条
38     showQuickJumper: false, //是否可以快速跳转至某页
39   };

SCSS

 1 /deep/.ant-spin-container {
 2   .ant-table {
 3     height: calc(100vh - 485px);
 4     background: #fff;
 5     // 滚动条
 6     .ant-table-scroll {
 7       .ant-table-header {  // 隐藏表头的滚动条凹槽
 8         overflow-y: hidden !important;
 9       }
10       .ant-table-body {
11         &::-webkit-scrollbar {
12           width: 5px;
13         }
14         &::-webkit-scrollbar-thumb {
15           height: 20px;
16           border-radius: 2px;
17           background-color: #ccc;
18         }
19       }
20     }
21     .ant-table-tbody {
22       & > tr > td {
23         height: 54px;
24         padding: 12px 0;
25         text-align: center;
26         font-size: 14px;
27         border-bottom: 1px solid rgba(0, 0, 0, 0.06);
28         color: rgba(0, 0, 0, 0.85);
29         background-color: #fff;
30       }
31       // 鼠标经过当前行
32       &
33         > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
34         > td,
35       &
36         > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
37         > td {
38         background-color: #e6f7ff;
39       }
40     }
41     .ant-table-thead {
42       & > tr > th {
43         height: 54px;
44         padding: 12px 0;
45         text-align: center;
46         font-weight: bold;
47         font-size: 14px;
48         border-bottom: 1px solid rgba(0, 0, 0, 0.06);
49         color: rgba(0, 0, 0, 0.85);
50         background-color: #f1f4f9;
51       }
52       & > tr:first-child > th:first-child,
53       & > tr:first-child > th:last-child {
54         border-radius: 0;
55       }
56     }
57   }
58   .ant-table-pagination.ant-pagination {
59     position: absolute;
60     right: 0;
61     bottom: 0;
62     margin: 0;
63     .ant-pagination-item-active a {
64       color: #fff;
65       background-color: #1890ff;
66     }
67   }
68 }