zoukankan      html  css  js  c++  java
  • Element table表尾合计行嵌入input

    <el-table :data="form.allowanceDetails" size="small" border :summary-method="getSummaries" show-summary style=" 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;
  • 相关阅读:
    命名空间“Aspose”中不存在类型或命名空间名称“Slides”。
    项目平台不同修改方法
    手机端自动跳转
    KindEditor得不到textarea值的解决方法
    正则表达式常用
    Log4Net不生成日志文件
    python笔记03-----文件操作
    python笔记04-----字典、元组、集合操作
    python笔记02-----字符串操作
    python笔记01-----列表操作
  • 原文地址:https://www.cnblogs.com/yyjspace/p/12201549.html
Copyright © 2011-2022 走看看