<el-table :data="form.allowanceDetails" size="small" border :summary-method="getSummaries" show-summary style="width: 100%;">
<el-table-column type="index" prop="sort" label="序号" width="60"></el-table-column>
<el-table-column prop="issueObject" label="发放对象">
</el-table-column>
<el-table-column label="发放金额(万元)" prop="paymentAmount">
<template slot-scope="scope">
<div class="customIpt2">
<el-input size="mini" v-model="scope.row.paymentAmount" @input="iptInput"></el-input>
</div>
</template>
</el-table-column>
<el-table-column prop="paymentTime" label="发放对象人次(万人次)">
<template slot-scope="scope">
<div class="customIpt2">
<el-input size="mini" v-model="scope.row.paymentTime" @input="iptInput2"></el-input>
</div>
</template>
</el-table-column>
<el-table-column prop="minimumStandard" label="最低人均标准(元*人/月)">
<template slot-scope="scope">
<div class="customIpt2">
<el-input size="mini" v-model="scope.row.minimumStandard" @input="iptInput3"></el-input>
</div>
</template>
</el-table-column>
<el-table-column prop="highestStandard" label="最高人均标准(元*人/月)">
<template slot-scope="scope">
<div class="customIpt2">
<el-input size="mini" v-model="scope.row.highestStandard" @input="iptInput4"></el-input>
</div>
</template>
</el-table-column>
<el-table-column label="备注">
<template slot-scope="scope">
<div>
<input class="ipt-noBorder" v-model="scope.row.remark" type="text" />
</div>
</template>
</el-table-column>
</el-table>
//将show-summary设置为true就会在表格尾部展示合计行
//使用summary-method并传入一个方法,写入合计逻辑
getSummaries(param) {
const {
columns,
data
} = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = "";
return;
}
if (index === 1) {
sums[index] = "总价";
return;
}
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);
} else {
//合计行最后一个单元格嵌入input
this.$nextTick(() => {
let a = document.querySelector('.el-table__footer').querySelectorAll('td')[6].querySelector('.cell');
let html = '<input class="ipt-noBorder" id="allowance_remark" type="text" />';
a.innerHTML = html;
if (this.form.remark != "" && this.form.remark != null) {
document.getElementById('allowance_remark').value = this.form.remark;
}
});
}
});
this.form.paymentAmount = sums[2];
this.form.paymentTime = sums[3];
this.form.minimumStandard = sums[4];
this.form.highestStandard = sums[5];
return sums;
},
//使用时重新赋值this.form.remark = document.getElementById('allowance_remark').value;