表格头部、斑马行等修改
头部样式绑定的:header-cell-style，用header-cell-class-name类名的方式没弄出来，就在行内使用的vw一样能响应式
<div class="tableCenter"><!-- 头部样式--><el-table:header-cell-style="{'background-color': '#fafafa','height': '3.56vw','padding':'0','border': 'none','font-size':'0.9vw','color':'#666666' }":row-class-name="tableRowClassName":data="tableData"style="width: 100%"><el-table-columnalign="center"prop="date"label="日期"></el-table-column><el-table-columnprop="name"label="姓名"align="center"></el-table-column><el-table-columnprop="address"label="地址"align="center"></el-table-column><el-table-columnfixed="right"align="center"label="操作"width="204"><template slot-scope="scope"><el-button type="text" class="checks iconfont icon-xiugai"@click="handleClick(scope.row)"></el-button><el-button type="text" class="checks iconfont el-icon-view"></el-button><el-button type="text" class="delete iconfont icon-shanchu"></el-button></template></el-table-column></el-table></div>`
//判断偶数行添加颜色，其他的用白色```javascript// 为表格行添加样式methods: {tableRowClassName({row, rowIndex}) {let index = rowIndex;if (index % 2 == 0) {return 'warning-row'} else {return 'warning-col'}},}
在写样式前最好先取消elementui自带的margin、padding，不然写响应式布局的时候容易来捣乱
//取消tr间距
::v-deep .el-table td, .el-table th {
padding: 0;
}
下面是整块的全部css
//图表内容.tableCenter {height: 548px;border: 1px solid #F8F6F6;//取消边框线::v-deep.el-table td, .el-table th.is-leaf {border: none;}//斑马行计算颜色、第一行::v-deep.el-table .warning-row {background: #F2F8FC;height: 48px;font-size: 14px;}//第二行::v-deep.el-table .warning-col {background: #ffffff;height: 48px;font-size: 14px;}//取消tr间距::v-deep .el-table td, .el-table th {padding: 0;}//查看编辑删除操作按钮间距样式取消::v-deep .el-button {margin: 0;padding: 0;//margin-left:0;}::v-deep.el-button--text {border: 1px solid #E8E8E8;border-radius: 2px 0px 0px 2px;width: 48px;height: 28px;}::v-deep.el-button--small, .el-button--small.is-round {padding: 0;}}
大屏小屏都是响应式的，下边的分页栏也不会往上凑
