加入合计属性结果不显示的问题
<el-table
ref="multipleTable"
:key="tableKey"
v-loading="listLoading"
:data="list"
stripe
border
:height="tableHeight"
:header-cell-style="tableHeaderColor"
:show-summary="showSum" // 关键属性
:summary-method="getSummaries" // 关键属性
style="width: 100%;"
@selection-change="handleSelectionChange"
@row-click="btn"
@select-all="selectAll"
>
<el-table-column type="selection" width="45" align="center" />
<el-table-column prop="signDate" label="签订时间" width="100px" align="center" :resizable="false" />
<el-table-column prop="conStatus" label="合同状态" width="100px" align="center" :resizable="false" :formatter="conStatusFormat" />
<el-table-column prop="conNum" label="合同编号" width="120px" align="center" show-overflow-tooltip :resizable="false" />
<el-table-column prop="conOwner" label="合同归属" width="100px" align="center" :resizable="false" :formatter="owerFormatter" />
<el-table-column prop="conMoney" label="合同金额(元)" width="100px" align="center" :resizable="false" />
<el-table-column prop="backMoney" label="已回款金额(元)" width="110px" align="center" :resizable="false" />
<el-table-column prop="invoiceMoney" label="已开票金额(元)" width="110px" align="center" :resizable="false" />
<el-table-column prop="conType" label="合同类型" width="80px" align="center" :resizable="false" :formatter="cusTypeFormat" />
</el-table>
data() {
return {
showSum: false
}
},
methods: {
getSummaries(param) {
const { columns, data } = param
if (data !== null) {
const sums = []
columns.forEach((column, index) => {
if (index === 1) {
sums[index] = '合计:'
return
}
if (column.property === 'conMoney' || column.property === 'backMoney' || column.property === 'invoiceMoney') {
const values = data.map(item => Number(item[column.property]))
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)
sums[index] += ' 元'
}
} else {
sums[index] = ''
}
})
return sums
}
},
//查询方法
// 列表分页方法
getList() {
this.listLoading = true
pageList(
this.listQuery.page,
this.listQuery.limit,
this.listQuery.conNum,
this.listQuery.conName,
this.listQuery.conType,
this.listQuery.conStatus,
this.listQuery.customerId,
this.listQuery.checkStatus,
this.listQuery.conOwner
).then(response => {
this.list = response.data.records
this.total = response.data.total
this.showSum = false //关键信息 加载问题导致不显示,控制其加载后显示
this.$nextTick().then(() => { //关键信息
this.showSum = true //关键信息
})
setTimeout(() => {
this.listLoading = false
}, 0.5 * 1000)
}).catch(error => {
this.listLoading = false
this.$messageOK('error', error)
})
},
}