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

电脑版发表于：2020/1/9 18:57

##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 自定义分页条样式
设计图：
![](https://img.tnblog.net/arcimg/aojiancc2/ebe89aff48934b699e43a1e1d1a961bf.png)

**样式如下：**
这里通过使用::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 */
```
</style>

剑轩

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

{{item.title}}