element ui表头样式，行样式，行间距。自定义分页条样式

element ui表头样式，行样式

element ui表头样式，行样式可以使用header-cell-style和row-style设置

 <el-table :data="tableData" :header-cell-style="headerCellStyle" :row-style="rowStyle" style="width: 100%">

设置通过json传递过来

data() {
    return {
        headerCellStyle: {
            background: 'rgba(29, 123, 189, 0.7)',
            height: '41px',
            color: '#fff',
            // border: '1px solid tan',
            // 注意如果想要降低表头高度，需要设置一下padding，不然它默认的padding有点大，你高度设置得在小它也有一定的高度
            paddingTop: "0px",
            paddingBottom: "0px",
        },
        rowStyle: {
            color: '#fff',
            height: '41px',
            background: 'rgba(8, 32, 68, 0.7)',
            marginBottom: "10px",
            opacity:"0.8",
            paddingTop:"10px",
            paddingBottom: "10px",
        },
    }
},

设置表格的行间距

// 设置行间距
::v-deep .el-table__body {
    border-collapse: separate !important;
    border-spacing: 0px 3px !important;
}

element ui 自定义分页条样式

设计图：

样式如下：
这里通过使用::v-deep做到了样式穿透。注意如果内部本身有对应样式的，通常需要设置!important才能生效。

<style scoped="scoped" lang="scss">
.app-container {
    margin-top: 15px
}
.pageWrapper {
    margin: 10px auto;
    text-align: center;
}
/* 分页调样式start */
::v-deep .el-pager .number {
    background-color: rgba(8, 32, 68, 0.6) !important;
    color: #fff !important;
    border: 1px solid #E9E9E9;
    opacity: "0.8"
}
::v-deep .el-pager .active {
    background-color: #1D7BBD !important;
    border-width: 0px !important;
}
::v-deep .el-pagination .el-pagination__total {
    border: 1px solid #E9E9E9;
    color: #ABAAAA !important;
    padding-left: 5px;
    padding-right: 5px;
    //font-size: 16px !important;
}
::v-deep .el-pagination .btn-quicknext {
    border: 1px solid #E9E9E9;
    color: #fff !important;
    background-color: rgba(8, 32, 68, 0.6) !important;
}
::v-deep .el-pagination .btn-prev {
    background-color: rgba(8, 32, 68, 0.6) !important;
    color: #fff !important;
    border: 1px solid #E9E9E9;
}
::v-deep .el-pagination .btn-next {
    background-color: rgba(8, 32, 68, 0.6) !important;
    color: #fff !important;
    border: 1px solid #E9E9E9;
}
/* 分页调样式开始end */