javascript
<el-table
ref="table"
class="dataTable"
:data="detailList"
:header-cell-style="tableHeaderColor"
:row-class-name="tableRowClassName"
highlight-current-row>
<el-table-column label="序号" align="center" min-width="40px">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="sum" label="总金额" min-width="80px">
<template slot-scope="scope">{{ scope.row.money}}元</template>
</el-table-column>
</el-table>
methods:{
tableRowClassName({ rowIndex }) {
if (rowIndex % 2 === 0) {
return "striped-row";
}
return "";
},
tableHeaderColor() {
return { background: "#4D76FF !important", color: "#FFFFFF !important", border: 0, fontSize: "14px" };
},
}
<style>
/deep/ .el-table .striped-row {
background-color: #f7f9ff !important;
}
</style>
想给列加单位:<template slot-scope="scope">{{ scope.row.money}}</template>
想给表头加样式::header-cell-style="tableHeaderColor"
想给table加斑马纹::row-class-name="tableRowClassName"