el-table
html
<el-table
border
:data="tableData"
:header-cell-style="{backgroundColor:'#D1E8FD',textAlign:'center',borderColor:'#D7D7D7',padding:0,height:'38px'}"
:row-class-name="tableRowClassName"
:cell-style="{textAlign:'center',padding:0,fontSize:'12px'}"
:row-style="{height:'36px'}"
style="width: 100%">
</el-table>
修改表头: 设置:header-cell-style
: 修改背景颜色,表头的高度
修改表行颜色: :row-class-name
: 根据rowIndex 返回不同的样式 ===》 这个样式不能在scope下,不然会不生效
修改表行高度: 设置:cell-style
的padding和 :row-style
的height
:header-cell-style
: 可以写一个函数,返回对应的style对象,,
js
/**
*
* @param row 所有的 header cell
* @param column 每一个column
* @param rowIndex 行号
* @param columnIndex 列号
*/
headerCellStyle({row,rowIndex,columnIndex}){
let styleObj = {textAlign:'center',backgroundColor:'#FAFAFA',borderTop:"1px solid #E8E8E8"}
console.log(row,columnIndex,typeof row)
if (columnIndex === 0){
return {...styleObj,borderLeft: "1px solid #E8E8E8"}
}
if (columnIndex === row.length-1){
return {...styleObj,borderRight: "1px solid #E8E8E8"}
}
return styleObj
}
引用:https://blog.csdn.net/qq_38950919/article/details/81056447
el-pagination
全局引入这个css:
css
/* 跳转的样式*/
.el-pagination .el-pagination__jump{
margin-left: 0;
}
/*
// page-sizes选择器
//::v-deep .el-select-dropdown__item li{
// background-color:red !important;
//}
*/
/* prev和next箭头的样式*/
.el-pagination .btn-next,
.el-pagination .btn-prev{
background:transparent !important;
background-color:transparent !important;
border: 1px solid #e8e8e8;
}
/* prev和next箭头disabled的样式
//::v-deep .el-pagination button:disabled {
// background-color:transparent !important;
//}
*/
/* 页码样式*/
.el-pager li{
background-color:#fff !important;
border: 1px solid #e8e8e8;
border-radius: 4px !important;
}
/*active的页码样式*/
.el-pager li.active{
color: #fff !important;
background-color:#008AC4 !important;
}
修改el-pagination文字:
js
document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳转";
引用:https://zhuanlan.zhihu.com/p/349079144
el-pagination样式修改:
css
// page-sizes选择器
::v-deep .el-select-dropdown__item li{
background-color:transparent !important;
}
// prev和next箭头的样式
::v-deep .el-pagination .btn-next,
::v-deep .el-pagination .btn-prev{
background:transparent !important;
background-color:transparent !important;
}
// prev和next箭头disabled的样式
::v-deep .el-pagination button:disabled {
background-color:transparent !important;
}
// 页码样式
::v-deep .el-pager li{
background-color:transparent !important;
}
// active的页码样式
::v-deep .el-pager li.active{
color: #267aff !important;
}