美文网首页
element UI table 合计放在第一行 可修改

element UI table 合计放在第一行 可修改

作者: 偶头像超凶 | 来源:发表于2021-06-15 12:12 被阅读0次
<el-table :data="tableData" size="small" border :summary-method="getSummaries" show-summary style="width: 100%;">
            <el-table-column type="index" prop="id" label="序号" width="60">
                <template slot-scope="scope">
                    <div class="customIpt2">
                        {{scope.$index + 1}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称">
            </el-table-column>
            <el-table-column label="amount1" prop="amount1">
                <template slot-scope="scope">
                    <div class="customIpt2">
                        <el-input size="mini" v-model="scope.row.amount1"></el-input>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="amount2" prop="amount2">
                <template slot-scope="scope">
                    <div class="customIpt2">
                        <el-input size="mini" v-model="scope.row.amount2"></el-input>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="amount3" prop="amount3">
                <template slot-scope="scope">
                    <div class="customIpt2">
                        <el-input size="mini" v-model="scope.row.amount3"></el-input>
                    </div>
                </template>
            </el-table-column>
        </el-table>
data() {
        return {
            tableData: [{
                id: '0000',
                name: '汇总',
                amount1: '0',
                amount2: '0',
                amount3: 0
            }, {
                id: '12987122',
                name: '王小虎',
                amount1: '234',
                amount2: '3.2',
                amount3: 10
            }, {
                id: '12987123',
                name: '王小虎',
                amount1: '165',
                amount2: '4.43',
                amount3: 12
            }, {
                id: '12987124',
                name: '王小虎',
                amount1: '324',
                amount2: '1.9',
                amount3: 9
            }],
            lastTableinfo: {
                id: '000000',
                name: '汇总',
                amount1: '0',
                amount2: '0',
                amount3: 0
            }
        }
    },
    methods: {
        getSummaries(param) {
            const {
                columns,
                data
            } = param;
            const sums = [];
            columns.forEach((column, index) => {
                const values = data.map((item, index) => {
                    if (index != 0) {
                        return 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 {
                    sums[index] = 'N/A';
                }
            });
            this.tableData[0].amount1= sums[2]
            this.tableData[0].amount2= sums[3]
            this.tableData[0].amount3= sums[4]
            return false;
        }
    }
/deep/.el-table__footer-wrapper{
        height: 0;
    }

相关文章

网友评论

      本文标题:element UI table 合计放在第一行 可修改

      本文链接:https://www.haomeiwen.com/subject/hrlzeltx.html