el-table 滚动条样式修改背景色修改

最新推荐文章于 2024-05-23 19:16:52 发布

Luich

最新推荐文章于 2024-05-23 19:16:52 发布

阅读量1k

点赞数 1

分类专栏： Element UI学习和使用文章标签： elementui vue

本文链接：https://blog.csdn.net/weixin_43864172/article/details/134596792

版权

Element UI学习和使用专栏收录该内容

4 篇文章 0 订阅

订阅专栏

el-table滚动条样式

根据产品需求，针对表格的样式需要设置滚动条，使用的elementUI表格，但是滚动条样式达不到要求的样子，所以针对表格的样式进行修改。这是最终要实现的效果：
在这里插入图片描述

说明

针对不同的版本可能会存在样式不生效的情况，所以对版本信息和测试浏览器进行说明：

版本号：vue@2.5.15 、element-ui@2.15.14 ；
浏览器：谷歌、Edge、QQ浏览器；

demo使用原生的html+cdn方式编写。

背景色和边框样式

代码片端.

 /* 1.el-table背景色+边框 */
.el-table,
.el-table th,
.el-table td,
.el-table tr {
    color: #fff;
    overflow: auto;
    border: 1px solid #1f507c !important;
    background-color: transparent !important;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
    background-color: transparent !important;
}

滚动条样式

代码片端.

 /* 2.el-table滚动条样式 */
/* 滚动条轨道宽度17会出现间隙，直接body撑满 */
.el-table__body-wrapper,
.el-table__body {
    /* 权重不够，需要增加important */
    width: 100% !important;
}
/* 滚动条大小设置  */
.el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #1f507c !important;
}

/* 滚动条滑块样式设置 */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
    width: 10px;
    border-radius: 10px;
    background-color: skyblue;
}
/* body宽度撑满后，表头会出现错位，增加下面样式覆盖gutter原始的宽度17 */
.el-table__header colgroup col[name='gutter'],
.el-table__body-wrapper colgroup col[name='gutter'] {
    display: table-cell;
}
.el-table th.gutter,
colgroup.gutter {
    width: 10px !important;
    border-left: 1px solid transparent !important;
}
/* 隐藏表头最后一个单元格的右边框 */
.has-gutter th.el-table__cell:nth-last-child(2) {
    /* 权重不够，需要增加important */
    border-right: none !important;
}

整体demo

代码片端.

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.15/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <style>
            html {
                background-color: #172242;
            }
            /* 1.el-table背景色+边框 */
            .el-table,
            .el-table th,
            .el-table td,
            .el-table tr {
                color: #fff;
                overflow: auto;
                border: 1px solid #1f507c !important;
                background-color: transparent !important;
            }
            .el-table--border::after,
            .el-table--group::after,
            .el-table::before {
                background-color: transparent !important;
            }
            /* 2.el-table滚动条样式 */
            /* 滚动条轨道宽度17会出现间隙，直接body撑满 */
            .el-table__body-wrapper,
            .el-table__body {
                /* 权重不够，需要增加important */
                width: 100% !important;
            }
            /* 滚动条大小设置  */
            .el-table__body-wrapper::-webkit-scrollbar {
                width: 10px;
                height: 10px;
                border-radius: 10px;
                background-color: #1f507c !important;
            }

            /* 滚动条滑块样式设置 */
            .el-table__body-wrapper::-webkit-scrollbar-thumb {
                width: 10px;
                border-radius: 10px;
                background-color: skyblue;
            }
            /* body宽度撑满后，表头会出现错位，增加下面样式覆盖gutter原始的宽度17 */
            .el-table__header colgroup col[name='gutter'],
            .el-table__body-wrapper colgroup col[name='gutter'] {
                display: table-cell;
            }
            .el-table th.gutter,
            colgroup.gutter {
                width: 10px !important;
                border-left: 1px solid transparent !important;
            }
            /* 隐藏表头最后一个单元格的右边框 */
            .has-gutter th.el-table__cell:nth-last-child(2) {
                /* 权重不够，需要增加important */
                border-right: none !important;
            }
        </style>
        <title>Document</title>
    </head>

    <body>
        <div id="app" style="height: 300px">
            <el-table
                :data="tableData"
                style="width: 100%"
                highlight-current-row
                border
                height="100%"
            >
                <el-table-column align="center" prop="date" label="日期"></el-table-column>
                <el-table-column align="center" prop="name" label="姓名"></el-table-column>
                <el-table-column align="center" prop="address" label="地址"></el-table-column>
            </el-table>
        </div>
        <script>
            var Main = {
                data() {
                    return {
                        tableData: [
                            {
                                date: '2016-05-02',
                                name: '王小虎',
                                address: '上海市普陀区金沙江路 1518 弄',
                            },
                            {
                                date: '2016-05-04',
                                name: '王小虎',
                                address: '上海市普陀区金沙江路 1517 弄',
                            },
                            {
                                date: '2016-05-01',
                                name: '王小虎',
                                address: '上海市普陀区金沙江路 1519 弄',
                            },
                            {
                                date: '2016-05-03',
                                name: '王小虎',
                                address: '上海市普陀区金沙江路 1516 弄',
                            },
                            {
                                date: '2016-05-02',
                                name: '王小虎',
                                address: '上海市普陀区金沙江路 1518 弄',
                            },
                            {
                                date: '2016-05-04',
                                name: '王小虎',
                                address: '上海市普陀区金沙江路 1517 弄',
                            },
                            {
                                date: '2016-05-01',
                                name: '王小虎',
                                address: '上海市普陀区金沙江路 1519 弄',
                            },
                            {
                                date: '2016-05-03',
                                name: '王小虎',
                                address: '上海市普陀区金沙江路 1516 弄',
                            },
                        ],
                    };
                },
            };
            var Ctor = Vue.extend(Main);
            new Ctor().$mount('#app');
        </script>
    </body>
</html>