效果图：
代码：
<el-table
stripe
size="mini"
:data="tableData"
border
max-height="400"
@selection-change="handleSelectionChange"
:cell-class-name="tableRowClassName"
:header-cell-class-name="tableRowClassName"
:summary-method="getSummaries"
show-summary
style="width: 100%; margin-top: 20px"
>
<el-table-column
align="center"
type="selection"
width="55">
</el-table-column>
<el-table-column
:key="index"
v-for="(item, index) in titleList"
:prop="item.prop"
:label="item.label"
>
</el-table-column>
</el-table>
export default {
data () {
return {
totalData: {
},
titleList: [
{
prop: 'calendarDate', label: '日期' },
{
prop: 'orderSalesFee', label: '已订购商品销售额' },
{
prop: 'orderQuantity', label: '已订购商品数量' },
{
prop: 'accessQuantity', label: '买家访问次数' },
{
prop: 'refundQuantity', label: '已退款的商品数量' },
{
prop: 'refundRate', label: '退款率' },
{
prop: 'shippedSalesFee', label: '已发货商品销售额' },
{
prop: 'shippedQuantity', label: '已发货商品数量' },
{
prop: 'shippedOrderQuantity', label: '已发货订单数量' }
],
tableData: []
}
},
mounted () {
this.dataReportFindAllFn()
},
methods: {
// 获取数据
dataReportFindAllFn () {
var jion = {
accessQuantity: 0,
calendarDate: "2020-10-07",
createDtm: "2021-01-15 19:29:13",
id: 100,
monthday: "10月07",
orderQuantity: 0,
orderSalesFee: "US$0.00",
refundQuantity: 0,
refundRate: "0.00%",
sellerId: 247,
shippedOrderQuantity: 0,
shippedQuantity: 0,
shippedSalesFee: "US$0.00",
updateDtm: null,
year: "2020"
}
this.tableData = [{
...jion}]
this.totalData = jion
},
// 选中返回数据
handleSelectionChange (val) {
console.log('val', val)
},
// 自定义 单个td 或者 th 的 颜色
tableRowClassName ({
column }) {
if (column.property === 'orderSalesFee') {
return 'orange'
} else if (column.property === 'orderQuantity') {
return 'blue'
} else if (column.property === 'accessQuantity') {
return 'green'
} else if (column.property === 'shippedSalesFee') {
return 'red'
}
return 'grey'
},
// 最后总计计算
getSummaries ({
columns }) {
const sums = []
columns.forEach((column, index) => {
if (index === 1) {
sums[index] = '总价'
return
}
if (this.totalData[`${
column.property}`] || this.totalData[`${
column.property}`] === 0) {
sums[index] = this.totalData[`${
column.property}`]
} else {
sums[index] = ''
}
})
return sums
},
leftSideColTypeFn (type) {
this.leftSideColType = type
}
}
}
.el-table--mini td, .el-table--mini th {
padding: 4px 0;
}
.el-table__footer-wrapper tbody td{
color: #000;
font-size: 12px;
font-weight: bolder;
background-color:#c0bfbf;
}
.el-table, .el-table thead {
color: #000;
font-size: 12px;
}
.el-table td.orange{
background-color: #f5d4a0 !important;
}
.el-table td.blue{
background-color: #bcd0e5 !important;
}
.el-table td.green{
background-color:#c8daa5 !important;
}
.el-table td.red{
background-color: #b89fbe !important;
}
.el-table th.grey{
background-color: #c0bfbf;
}
.el-table th.orange{
background-color: #f90;
}
.el-table th.blue{
background-color: #69c;
}
.el-table th.green{
background-color:#85b12d;
}
.el-table th.red{
background-color: #875392;
}
一. 遇到的问题整理：
1、设置了高度后 height 总计的一行刷新消失问题
解决方法： 使用 max-height 去固定高度