欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

element表格样式自定义

程序员文章站 2022-06-07 18:06:18
...
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>

        #app .el-table thead tr{
            background: #0e223c;
            color: #aeb6c0;
        }
        #app .el-table th, .el-table tr,.el-table td{
            border: 0;
            background-color: transparent;
        }
        
        #app .el-table__row{
            color: #aeb6c0;
        }
        
        #app .el-table__row:nth-child(odd){
            background: #0e223c;
            color: #aeb6c0;
        }
        #app .el-table__row:nth-child(odd) .el-checkbox__input.is-checked .el-checkbox__inner {
            background-color: #fff;
            border-color: #fff;
        }

        #app .el-table__row:nth-child(even){
            background: #011432;
        }
        #app .el-table__row:nth-child(even) .el-checkbox__input.is-checked .el-checkbox__inner {
            background-color: #147383;
            border-color: #147383;
        }
        #app .el-table--enable-row-hover .el-table__body tr:hover > td {
           background: #157283;
           color: #fff; 
        }
        #app  .el-checkbox__inner {
            background-color:#0e223c;
        }
        
        #app .el-checkbox__input.is-checked .el-checkbox__inner,
         .el-checkbox__input.is-indeterminate .el-checkbox__inner,
         .el-checkbox__input.is-focus .el-checkbox__inner {
            background: #fff;
            border-color: #fff;
        }
        #app .el-checkbox__input .el-checkbox__inner::after {
            border: 2px solid #0e223c;
            box-sizing: content-box;
            content: "";
            border-left: 0;
            border-top: 0;
            height: 7px;
            left: 3px;
            position: absolute;
            top: 1px;
            width: 3px;
            transform: rotate(45deg) scaleY(1);
        }

        
        
    </style>
</head>

<body>
    <div id="app">
        <el-table :data="tableData" style="width: 100%" :header-cell-style="getRowClass">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            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 弄'
                }]
            }
        },
        methods:{
            getRowClass ({ row, column, rowIndex, columnIndex }) {
                return 'background: #011432;color: #aeb6c0;';
            }
        }
    })
</script>

</html>

 

相关标签: css3