效果如下
整体代码 ,具体方法在最下面!
<el-table v-loading="listLoading" :data="sendReceivList" element-loading-text="Loading" border fit ref="tableList" :header-cell-class-name="addClass"
highlight-current-row @selection-change="handleSelectChange" :row-key="getRowKey">
<el-table-column label="单位" align="center" width="60px">
<template slot-scope="scope">
<div>{{ scope.row.unit }}</div>
</template>
</el-table-column>
<el-table-column label="期初结存" align="center" >
<el-table-column label="数量" align="center" >
<template slot-scope="scope">
<div>{{ scope.row.preNum }}</div>
</template>
</el-table-column>
<el-table-column label="平均单价" align="center" >
<template slot-scope="scope">
<div>{{ scope.row.prePrice }}</div>
</template>
</el-table-column>
<el-table-column label="金额" align="center" >
<template slot-scope="scope">
<div>{{ scope.row.preUnitPrice }}</div>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="本期入库" align="center" >
<el-table-column label="数量" align="center" >
<template slot-scope="scope">
<div>{{ scope.row.rkNum }}</div>
</template>
</el-table-column>
<el-table-column label="平均单价" align="center" >
<template slot-scope="scope">
<div>{{ scope.row.rkUnitPrice }}</div>
</template>
</el-table-column>
<el-table-column label="金额" align="center" >
<template slot-scope="scope">
<div>{{ scope.row.rkPrice }}</div>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="本期出库" align="center" >
<el-table-column label="数量" align="center" >
<template slot-scope="scope">
<div>{{ scope.row.ckNum }}</div>
</template>
</el-table-column>
<el-table-column label="平均单价" align="center" >
<template slot-scope="scope">
<div>{{ scope.row.ckUnitPrice }}</div>
</template>
</el-table-column>
<el-table-column label="金额" align="center" >
<template slot-scope="scope">
<div>{{ scope.row.ckPrice }}</div>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="期末结余" align="center" >
<el-table-column label="数量" align="center" >
<template slot-scope="scope">
<div>{{ scope.row.postNum }}</div>
</template>
</el-table-column>
<el-table-column label="平均单价" align="center" >
<template slot-scope="scope">
<div>{{ scope.row.postPrice }}</div>
</template>
</el-table-column>
<el-table-column label="金额" align="center" >
<template slot-scope="scope">
<div>{{ scope.row.postUnitPrice }}</div>
</template>
</el-table-column>
</el-table-column>
<el-table-column align="center" label="出入库流水" fixed="right">
<template slot-scope="scope">
<el-button type="text" @click="jumpClick" size="small">查看</el-button>
</template>
</el-table-column>
</el-table>
主要看这!!!
<el-table :data="sendReceivList" :header-cell-class-name="addClass"
methods: {
addClass({ row, rowIndex, column, columnIndex }) {
if (column.label == '数量'||column.label == '平均单价'||column.label == '金额') {
return "whiteColor";
} else {
return 'huiColor'
}
},
},
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-table__header-wrapper th.whiteColor {
background-color: white !important;
color: red;
}
::v-deep .el-table__header-wrapper th.huiColor {
background-color: #F5F7FA !important;
}
</style>