//html页面 :row-class-name="TableRowClassName"
<el-table :row-class-name="TableRowClassName" ></el-table>
//js方法中
methods: { // 斑马线 TableRowClassName({ rowIndex }) { if (rowIndex % 2 === 0) { return 'warning-row' } else { return 'success-row' } } }
//style样式 .warning-row .success-row
::v-deep .el-table { .warning-row { background: #15192c; } .success-row { background: #1b1b3a; } .el-table__header-wrapper th, .el-table__fixed-header-wrapper th { word-break: break-word; background-color: #1b1b3a; color: #fff; height: 20px; font-size: 12px; } th, tr, td { color: #fff; font-size: 12px; } tbody tr:hover > td { background: #2a2467 !important; } }