Element table row insert total input footer

<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 = "payable to">
                        </el-table-column>
                        <El-table-column label = "the amount of payments (million)" 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 = "payable to passengers (million people)">
                            <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 = "minimum standard per capita (yuan * person / month)">
                            <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 = "highest per capita standard (yuan * person / month)">
                            <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>


// will show-summary is set to true will show the total rows in the table tail 
// use the summary-method and passing in a method, the total write logic
getSummaries(param) {
                const {
                    columns,
                    data
                } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = "";
                        return;
                    }
                    if (index === 1) {
                        sums [index] = "total" ;
                         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);
                    } The else {
 // total row last cell in the embedded INPUT 
                        the 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;
            },

// re-assignment using this.form.remark = document.getElementById ( 'allowance_remark') value.;

Guess you like

Origin www.cnblogs.com/yyjspace/p/12201549.html