element ui table 表尾合计行 错位优化
<el-table v-loading="listLoading" :data="dataList" :header-cell-style="{ background: '#f5f7fa' }" element-loading-text="拼命加载中" @selection-change="(list) => (selectList = list)" border @row-click="handleRowClick" ref="activityTable" :summary-method="getSummaries" :show-summary="true" :height="tableHeight" highlight-current-row> <el-table-column type="selection" align="center" width="65" fixed></el-table-column> <el-table-column label="订单编号" align="center" prop="orderSn" width="180" fixed show-overflow-tooltip></el-table-column> <el-table-column label="客户名称" align="center" prop="remark" width="140" show-overflow-tooltip></el-table-column> <el-table-column label="下单时间" align="center" width="140" show-overflow-tooltip prop="createTime" :formatter="formatTime"></el-table-column> </el-table>
updated () { this.$nextTick(() => { this.$refs['activityTable'].doLayout(); }) }, methods: { getSummaries (param) { const { columns, data } = param; const sums = []; columns.forEach((column, index) => { if (index === 0) { sums[index] = "总合计"; return; } const values = data.map((item) => Number(item[column.property])); if ( !values.every((value) => isNaN(value)) && (column.property == "useRebatePrice") ) { sums[index] = values .reduce((prev, curr) => { const value = Number(curr); if (!isNaN(value)) { return Number(prev) + curr; } else { return Number(prev); } }, 0) .toFixed(2); } else if (column.property == "orderPrice") { sums[index] = values.reduce((prev, curr) => { const value = Number(curr); if (!isNaN(value)) { return Number(prev) + curr; } else { return Number(prev); } }, 0); } else { sums[index] = ""; } }); return sums; }, },