El-table dynamic meter head, dynamic summing problem

problem description

use el-table components to achieve a dynamic table, header and data city dynamic, custom totals will report errors.

the environmental background of the problems and what methods you have tried

The header in the

table, and the data will be looped out by v-for.

related codes

/ / Please paste the code text below (do not replace the code with pictures)
< 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>

what result do you expect? What is the error message actually seen?

the expected result is that the total line can appear at the bottom of the table. At present, an error is reported. The reason for the error is as follows:

//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; },