重要的不是过去，而是你怎末看待过去，而我们对过去的看法，是可以改变的。
效果预览：
（1）删除表格外框，内框。
（2）添加表头边框，修改表头文字大小、颜色
（3）斑马格修改颜色，选中行高亮颜色修改
（4）修改滚动条样式
目录
一、原始样式说明
1.斑马纹表格
2.带状态表格
二、修改el-table样式
1.设置表格行高
2.修改背景色、字体颜色
3.设置表头字体
4.修改斑马格样式
5.修改hove行高亮颜色
6.修改滚动条样式
三、代码整合速览
一、原始样式说明
Element - The world's most popular Vue UI framework
1.斑马纹表格
使用strip属性，即可形成如图效果。
2.带状态表格
可以通过指定 Table 组件的row-class-name属性来为 Table 中的某一行添加 class，表明该行处于某种状态。
二、修改el-table样式
1.设置表格行高
// 设置表格行高度::v-deep .el-table__body tr,::v-deep .el-table__body td {padding: 0;height: 54px;}
2.修改背景色、字体颜色
// 表格内背景颜色::v-deep .el-table th,::v-deep .el-table tr,::v-deep .el-table td {background-color:#063570; // 背景透明border: 0px;color: #93dcfe; // 修改字体颜色font-size: 24px;height: 5px;font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;font-weight: Normal;}
// 去掉最下面的那一条线.el-table::before {height: 0px;}
3.设置表头字体
在表格组件部分添加 :header-cell-style。注意里面不支持font-weight写法，需要使用驼峰写法。
<el-table:data="tableData":header-cell-style="{color: '#fff',background: '#0a3370',fontWeight: '700',}"max-height="720"></el-table>
// 修改表头样式-加边框::v-deep .el-table__header-wrapper {border: solid 1px #04c2ed;// box-sizing: border-box;}
4.修改斑马格样式
（1）使用表格属性:row-class-name="tableRowClassName"
（2）添加JS 方法
tableRowClassName({ row, rowIndex }) {if (rowIndex % 2 == 0) {return "";} else {return "warning-row";}},
（3）添加CSS的warning-row样式
// 表格斑马自定义颜色::v-deep .el-table__row.warning-row {background: #063570;}
5.修改hove行高亮颜色
// 修改高亮当前行颜色::v-deep .el-table tbody tr:hover > td {background: #063570 !important;}// 取消当前行高亮--此时不能进行行点击操作// ::v-deep .el-table tbody tr {// pointer-events: none;// }
6.修改滚动条样式
// 滚动条样式::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {background-color: #063570;}::v-deep .el-table__body-wrapper::-webkit-scrollbar {width: 10px;opacity: 0.5;}::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {border-radius: 15px;background-color: #0257aa;}
三、代码整合速览
<el-table:data="tableData"key='xqtable'@row-click="handleClickChange"style="width: 90%; margin: auto":highlight-current-row="false":header-cell-style="{color: '#fff',background: '#0a3370',fontWeight: '700',}":row-class-name="tableRowClassName"max-height="720"><el-table-column label="序号" prop="index" width="120" align="center"><template slot-scope="scope"><span>{{ scope.$index + 1 }}</span></template></el-table-column><el-table-column prop="paramterName" label="参数名" width="500"><template slot-scope="scope"><span @click="showDetailChart(scope.row)">{{scope.row.paramterName}}</span></template></el-table-column></el-table>
methods:{// 表格斑马格:row-class-name="tableRowClassName"tableRowClassName({ row, rowIndex }) {if (rowIndex % 2 == 0) {return "";} else {return "warning-row";}},// 行点击事件handleClickChange(row, event, column) {console.log('点击行',row.index, this.myChart, row, column, row.active);},}
// 表格部分样式// 最外层透明::v-deep .el-table,::v-deep .el-table__expanded-cell {background-color: transparent;color: #93dcfe;font-size: 24px;}// 表格内背景颜色 ::v-deep .el-table th,::v-deep .el-table tr,::v-deep .el-table td {background-color: transparent;border: 0px;color: #93dcfe;font-size: 24px;height: 5px;font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;font-weight: Normal;}// 去掉最下面的那一条线 .el-table::before {height: 0px;}// 设置表格行高度::v-deep .el-table__body tr,::v-deep .el-table__body td {padding: 0;height: 54px;}// 修改高亮当前行颜色::v-deep .el-table tbody tr:hover > td {background: #063570 !important;}// 取消当前行高亮// ::v-deep .el-table tbody tr {// pointer-events: none;// }// 修改表头样式-加边框::v-deep .el-table__header-wrapper {border: solid 1px #04c2ed;// box-sizing: border-box;}// 表格斑马自定义颜色::v-deep .el-table__row.warning-row {background: #063570;}// 滚动条样式::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {background-color: #063570;}::v-deep .el-table__body-wrapper::-webkit-scrollbar {width: 10px;opacity: 0.5;}::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {border-radius: 15px;background-color: #0257aa;}
附：
【ElementUI样式优化1】el-table 修改斑马格样式 修改滚动条样式 添加表头边框 删除表格边框划线
