el-table 动态表头，动态合计的问题

Question

问题描述

用el-table组件实现一个动态的表格，表头和数据都市动态，自定义合计的时候会报错。

问题出现的环境背景及自己尝试过哪些方法

表格中的表头，和数据都市由v-for循环出来的。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<el-table

                    :data="businessObj.businessList" 
                    class="business_edit"
                    style="width: 100%"
                    :cell-class-name="setCellClassName"
                    @cell-click="cellClick"
                    max-height="500"
                    v-if="businessObj.businessList.length > 0"
                    :summary-method="getSummaries"
                    show-summary
                >
                    <template v-for="(n,i) in businessObj.businessTitleList">
                        <el-table-column 
                            v-if="i == 0"
                            :label="n.showname" 
                            width="180" 
                            fixed
                            :key="i"
                        >
                            <template slot-scope="scope">
                                <span>{{businessObj.businessList[scope.$index][i].showname}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column
                            v-else-if="i == businessObj.businessTitleList.length -1"
                            :label="n.showname" 
                            width="180" 
                            fixed="right"
                            :key="i"
                        >
                            <template slot-scope="scope">
                                <span :class="businessObj.businessList[scope.$index][i].edTotal != businessObj.businessList[scope.$index][i].showname && businessObj.businessList[scope.$index][i].edTotal != 0?'num_td not_same_td blod_td':'num_td blod_td'">
                                    <span v-if="businessObj.businessList[scope.$index][i].edTotal != businessObj.businessList[scope.$index][i].showname && businessObj.businessList[scope.$index][i].edTotal != 0">{{businessObj.businessList[scope.$index][i].edTotal}}</span>
                                    <span v-if="businessObj.businessList[scope.$index][i].edTotal != businessObj.businessList[scope.$index][i].showname && businessObj.businessList[scope.$index][i].edTotal != 0">/</span>
                                    <span>{{businessObj.businessList[scope.$index][i].showname}}人</span>
                                </span>
                            </template>
                        </el-table-column>

                        <el-table-column
                            v-else
                            :label="n.showname" 
                            width="180" 
                            :key="i"
                        >
                            <template slot-scope="scope">
                                <!-- <el-input 
                                    size="small"
                                    v-model="businessObj.businessList[scope.$index][i].showname"
                                    placeholder="请输入内容" 
                                    @blur="inputBlur($event)" 
                                    ref="input_td"
                                ></el-input> -->
                                <el-input-number 
                                    v-model="businessObj.businessList[scope.$index][i].showname" 
                                    :precision="2" 
                                    :step="1" 
                                    :min="0"
                                    :controls="false"
                                    @blur="inputBlur($event)"
                                    v-if="businessObj.editBusiness"
                                ></el-input-number>
                                <span class="num_td">{{businessObj.businessList[scope.$index][i].showname}}</span>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>

你期待的结果是什么？实际看到的错误信息又是什么？

期望的结果是可以在表格下面出现合计这一行，目前是报错的，报错原因这样：

Answer 1

这个问题是因为我那个统计方法

getSummaries(param) {

                //初次进入摊分tab栏，需要拿到滚动的主体
                if ($('.el-table__body-wrapper').length > 0) {
                    if (this.flag.initTableBody == true) {
                        this.flag.initTableBody = false;
                        // $('.el-table').append('<div class="scrollLoading"></div>') 
                        $('.el-table').append('<div class="scrollLoading"><div class="el-loading-mask"><div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg></div></div></div>');
                        this.scrollGetRecordList();
                    }
                }
                const {
                    columns,
                    data
                } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    sums[index] = this.shareAssessmentSummary[index].showname;
                });
                return sums;
            },

里数据结构不同导致的循环的时候，通过下标来拿数据时候拿不到导致，调整一下就好了哦，

Answer 2

求问解决方法,我也遇到这个问题了