el-table自定义样式，表头固定，数据过多时滚动

最终结果：（此处没体现出来滚动，数据没那么多）

1.表头固定，设置表头样式，修改表格背景色

   <div class="category-table">
     <el-table
            ref="tableRef"
            class="common-table"
            height="100%"
            :row-style="{ height: rowHeight + 'px' }"
            :header-row-style="{
              background: `url(${tableHeader}) center no-repeat !important`,
              backgroundSize: `100% 100% !important`,
            }"
            style="width: 100%; height: 100%; background-color: transparent"
          >
    </el-table>
  </div>
  动态设置行高，在获取到数据以后，记得加一个$nextTick()，不然会报错

1. // 在获取到表格数据后，判断数据长度大于0后调用
2. this.$nextTick(() => {
3.    this.initRowHeight();
4. });
6. // 设置行高
7.     initRowHeight() {
8.       let tableHeight =
9.         Math.round(this.$refs["tableRef"].$el.offsetHeight) -
10.         Math.round(this.$refs["tableRef"].$el.childNodes[1].offsetHeight);
11.       this.rowHeight = Math.floor(tableHeight / 10); // 返回小于等于最终结果的最大整数
12.       setTimeout(() => {
13.         if (this.$refs.tableRef) {
14.           this.$refs.tableRef.doLayout();
15.         }
16.       }, 1000);
17.     },

复制代码

2.写在有scoped 的style标签内

1. /* 显示滚动条 */
2. .category-table ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
3.   overflow-y: scroll;
4. }
5. /* 设置表格的滚动条宽度 */
6. .category-table >>> .el-table__body-wrapper::-webkit-scrollbar {
7.   width: 10px;
8.   height: 8px;
9. }
10. /*定义滚动条轨道 内阴影+圆角*/
11. .category-table >>> .el-table__body-wrapper::-webkit-scrollbar-track {
12.   border-radius: 8px;
13.   background-color: transparent;
14. }
15. /*定义滑块 内阴影+圆角*/
16. .category-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
17.   border-radius: 8px;
18.   box-shadow: inset 0 0 6px rgba(200, 209, 217, 0.3);
19.   background-color: rgba(76, 77, 77, 0.1);
20. }

复制代码

 3.公共的scss样式文件内，没有公共样式文件的话可以放在没有scoped的style标签内，有的话要包管在main.js里引入了

1. /* el-table表格组件样式 */
2. .common-table {
4.     /* 表格加载中的背景 */
5.     .el-loading-mask {
6.         background-color: transparent;
7.     }
9.     /** 设置表格暂无数据样式 */
10.     .el-table__empty-block {
11.         background-color: transparent;
12.         color: #a8bfd5;
13.         letter-spacing: 2px;
14.     }
16.     /** 修改表头多选样式 */
17.     .el-checkbox__inner {
18.         background-color: transparent;
19.     }
21.     .el-checkbox__inner:hover {
22.         border: 1px solid #6d90ae;
23.     }
25.     .el-checkbox__input.is-checked .el-checkbox__inner {
26.         background-color: #1173be;
27.     }
29.     /* 设置表头样式 */
30.     &.el-table .el-table__header-wrapper th {
31.         color: #85b4e6;
32.         font-weight: normal;
33.         font-size: var(--font-size-base);
34.         letter-spacing: 2px;
35.         background-color: transparent !important;
36.         background: url("/images/imagine/table-header.png") center no-repeat;
37.         background-size: 100% 100%;
38.         border-bottom: 1px solid #0b4f85;
39.         box-sizing: border-box;
40.     }
42.     /** 设置表格的行背景色 */
43.     .el-table__row {
44.         background: url("/images/imagine/table-row1.png") center no-repeat;
45.         background-size: 100% 100%;
46.     }
48.     /** 去掉每一行的底边border */
49.     &.el-table td.el-table__cell {
50.         color: #aec4da;
51.         border-bottom: 1px solid #0b4f85;
52.         font-size: var(--font-size-base);
53.         letter-spacing: 2px;
54.     }
56.     /* 修改表格上侧和左侧的border */
57.     &.el-table--border,
58.     &.el-table--group,
59.     /* 修改表格右侧和底侧的border */
60.     &.el-table--border:after,
61.     &.el-table--group:after,
62.     &.el-table:before {
63.         border-color: transparent;
64.     }
66.     /* 删除表格右侧的border */
67.     &.el-table--border::after {
68.         width: 0;
69.     }
71.     /** 设置表格左侧第一列的边 */
72.     &.el-table td.el-table__cell:first-child {
73.         border-left: 1px solid #0b4f85;
74.     }
76.     /** 去掉表格的底边border */
77.     &.el-table::before {
78.         height: 0;
79.     }
81.     /** 去掉表格头部的border */
82.     &.el-table--border {
83.         border: none;
84.     }
86.     /** 表格内部每一列右侧border */
87.     &.el-table--border .el-table__cell {
88.         border-right: 1px solid #0b4f85;
89.     }
91.     /** 表格行的鼠标滑过样式 */
92.     &.el-table tbody tr:hover>td {
93.         background: url("/images/imagine/table-row2.png") center no-repeat !important;
94.         background-size: 100% 100% !important;
95.     }
97.     /* 去掉表格滚动条那一列的border */
98.     &.el-table--border th.el-table__cell.gutter:last-of-type {
99.         border-bottom-width: 0;
100.     }
101. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。