<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;