【实战项目】修改element表格滚动条样式

---

又见面了鸭！

---

需求：修改表格样式

一、修改表格空白背景颜色

在数据获取不全的情况下，下侧与右方出现空白色，如下图：

image.png

代码结构如下，在table标签外侧套一层大的div，用三箭头深入修改样式：

image.png

修改代码如下：

.my_table>>>.el-table__empty-block {
        background: #111726;  
    }
    
.my_table>>>.el-table {
        background: #111726;
    }

效果：

image.png

二、修改滚动条样式

问题一解决的是数据不能撑满整个表格的高度的情况
问题二解决的是数据足够多时，将出现滚动条，样式也是默认的

image.png

修改代码如下：

.my_table>>>.el-table__body-wrapper::-webkit-scrollbar-thumb {
        background: #02D8FA;
        width: 1px;
        border: none;
    }
    /* 滚动条 */
    
 .my_table>>>.el-table__body-wrapper::-webkit-scrollbar {
        color: #02d8fa;
        width: 4px;
    }

效果：

image.png

---

【PS】一些朋友问，有时数据够多，但是就是不出现滚动条该如何解决

【回答】在table上加一个高度的限制即可

image.png