关于element UI 使用多级嵌套表格 table的自定义计算不生效问题

有空再来整理
贴代码

<template>
    <div class="app-container">
        <el-table :data="dataList" style="width: 100%;margin-top:30px;" row-key="title" border default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"  >
            <el-table-column type="expand">
                <template slot-scope="props">
                    <!-- 最内层 -->
                    <el-table :data="dataList" style="" row-key="title" :span-method="arraySpanMethod" :show-header="false" @expand-change="expandChange">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <!-- Deposit -->
                                <el-table :data="deposit_data" style="" row-key="title"  show-summary  :summary-method="getSummaries">
                                    <el-table-column align="center" label="Game" width="100" >
                                        <template slot-scope="scope">
                                            {{ scope.row.game_info.name }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" label="Tramsaction Type" width="100">
                                        <template slot-scope="scope">
                                            {{ scope.row.transaction_type }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="center" label="Bank" width="220">
                                        <template slot-scope="scope">
                                            {{ scope.row.bank.name }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="header-center" label="Amount" width="138" prop="amount">
                                        <template slot-scope="scope">
                                            {{ scope.row.amount }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="header-center" label="Bonus" prop="bonus">
                                        <template slot-scope="scope">
                                            {{ scope.row.bonus }}
                                        </template>
                                    </el-table-column>
                                    <!-- Deposit(ATM)+Withdraw -->
                                    <el-table-column align="header-center" label="Total Amount" prop="total_amount">
                                        <template slot-scope="scope">
                                            {{ scope.row.total_amount}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="header-center" label="Status">
                                        <template slot-scope="scope">
                                            {{ statusText(scope.row.status) }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="header-center" label="Remark">
                                        <template slot-scope="scope">
                                            {{ scope.row.transactions_remark }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="header-center" label="Entered By">
                                        <template slot-scope="scope">
                                            {{ scope.row.created_at }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="header-center" label="Entered Datetime">
                                        <template slot-scope="scope">
                                            {{ scope.row.created_at }}
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-table-column>

                        <el-table-column align="center" label="Game" width="100" >
                            <template slot-scope="scope">
                                Transaction Type: Deposit (ATM)
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="Tramsaction Type" width="100">
                            <template slot-scope="scope">
                              
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="Bank" width="220">
                            <template slot-scope="scope">
                              
                            </template>
                        </el-table-column>
                        <el-table-column align="header-center" label="Amount">
                            <template slot-scope="scope">
                             
                            </template>
                        </el-table-column>
                        <el-table-column align="header-center" label="Bonus">
                            <template slot-scope="scope">
                            
                            </template>
                        </el-table-column>
                        <!-- Deposit(ATM)+Withdraw -->
                        <el-table-column align="header-center" label="Total Amount">
                            <template slot-scope="scope">
                         
                            </template>
                        </el-table-column>
                        <el-table-column align="header-center" label="Status">
                            <template slot-scope="scope">
                              
                            </template>
                        </el-table-column>
                        <el-table-column align="header-center" label="Remark">
                            <template slot-scope="scope">
                           
                            </template>
                        </el-table-column>
                        <el-table-column align="header-center" label="Entered By">
                            <template slot-scope="scope">
                             
                            </template>
                        </el-table-column>
                        <el-table-column align="header-center" label="Entered Datetime">
                            <template slot-scope="scope">
                           
                            </template>
                        </el-table-column>

                    </el-table>
                </template>
            </el-table-column>

            <!-- 最外层 -->
            <el-table-column align="center" label="ID" width="100">
                <template slot-scope="scope">
                    {{ scope.row.id }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="Member" width="100">
                <template slot-scope="scope">
                    {{ scope.row.member_name }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="Bank Account" width="220">
                <template slot-scope="scope">
                    {{ scope.row.bank_name }}({{ scope.row.bank_card }})
                </template>
            </el-table-column>
            <el-table-column align="header-center" label="Deposit(ATM)">
                <template slot-scope="scope">
                    {{ scope.row.deposit }}
                </template>
            </el-table-column>
            <el-table-column align="header-center" label="Withdraw">
                <template slot-scope="scope">
                    {{ scope.row.withdraw }}
                </template>
            </el-table-column>
            <el-table-column align="header-center" label="Bonus">
                <template slot-scope="scope">
                    {{ scope.row.bonus }}
                </template>
            </el-table-column>
            <!-- Deposit(ATM)+Withdraw -->
            <el-table-column align="header-center" label="Profit">
                <template slot-scope="scope">
                    {{ profit(scope.row.deposit, scope.row.withdraw) }}
                </template>
            </el-table-column>
            <el-table-column align="header-center" label="Rebate Bonus 3%">
                <template slot-scope="scope">
                    {{ rebate(profit(scope.row.deposit, scope.row.withdraw), 0.03) }}
                </template>
            </el-table-column>
            <el-table-column align="header-center" label="Entered DateTime">
                <template slot-scope="scope">
                    {{ scope.row.created_at }}
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :visible.sync="dialogVisible" :title="dialogType === 'edit' ? '编辑' : '新增'">
            <el-form :model="form" label-width="100px" label-position="left">
                <el-form-item label="Member">
                    <el-select v-model="form.member_id" filterable placeholder="Member">
                        <el-option v-for="item in members" :key="item.name" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Game">
                    <el-select v-model="form.game_info_id" filterable placeholder="Game">
                        <el-option v-for="item in game_info" :key="item.name" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Adjustment Type">
                    <el-radio v-model="radio" label="1">Deposit(ATM)</el-radio>
                    <el-radio v-model="radio" label="2">Withdraw(ONLINE)</el-radio>
                    <el-radio v-model="radio" label="3">Free Cash</el-radio>
                    <el-radio v-model="radio" label="4">Transfer</el-radio>
                    <el-radio v-model="radio" label="5">Withdraw</el-radio>
                    <el-radio v-model="radio" label="6">Withdraw Free Cash</el-radio>
                </el-form-item>
                <el-form-item label="Bank">
                    <el-select v-model="form.bank_id" filterable placeholder="Bank">
                        <el-option v-for="item in bank" :key="item.name" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Amount">
                    <el-input type="number" v-model="form.amount" placeholder="Amount" />
                </el-form-item>
                <el-form-item label="Bonus">
                    <el-input type="number" v-model="form.bonus" placeholder="Bonus" />
                </el-form-item>
                <el-form-item label="Transaction Remarks">
                    <el-input v-model="form.transactions_remark" placeholder="Transaction Remarks" />
                </el-form-item>
                <el-form-item label="Status">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
                </el-form-item>
                <el-form-item label="Member Remarks">
                    <el-input v-model="form.member_remark" placeholder="Member Remarks" />
                </el-form-item>
            </el-form>
            <div style="text-align:right;">
                <el-button type="danger" @click="dialogVisible = false">
                    取消
                </el-button>
                <el-button type="primary" @click="confirmSubmit">
                    确认
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import { mapState } from 'vuex'
import { getMemberSummarys, getDepositData, addMemberSummary, deleteMemberSummary, updateMemberSummary } from '@/api/member_summary'

const defaultData = {
    region_limit: [],
}
export default {
    components: {

    },
    data() {
        return {
            dataList: [],
            admin_roles: [],
            dialogVisible: false,
            dialogType: 'new',
            form: {},
            radio: '1',
            bank: [],
            members: [],
            game_info: [],
            deposit_data:[]
        }
    },
    computed: {
        statusText() {
            return function (val) {
                return val === 1 ? 'Approve' : 'Reject'
            }
        },

        profit: function (v1, v2) {
            return function (v1, v2) {
                return Number(v1) + Number(v2)
            }
        },
        rebate: function (v1, v2) {
            return function (v1, v2) {
                return Number(v1) * Number(v2)
            }
        },
        ...mapState({
            regions: state => state.user.regions
        })
    },
    created() {
        this.fetchData()
        this.form.region_limit = this.regions
    },

    methods: {
        async fetchData() {
            await getMemberSummarys().then(res => {
                this.dataList = res.data.data
                this.members = res.data.members
                this.bank = res.data.bank
                this.game_info = res.data.game_info
            })
        },
        expandChange(row,expandRows) {
            this.getDeposit(row.id)
        },
        //请求里面的数据
        async getDeposit(member_id){
             await getDepositData(member_id).then(res=>{
                    this.deposit_data = res.data
             })
        },

        //合并单元格  return [行,列]
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if(columnIndex==1){
                return [1,10]
            }
      },
      //合计
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          console.log(column)
          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);
            sums[index] += '';
          } else {
            sums[index] = '';
          }
        });
        return sums;
      }

    }
}
</script>
  
<style lang="scss" scoped>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.role_close {
    display: none;
}
</style>
<style></style>
  

一定要给对应的表格加上prop属性，这个属性对应你后端返回data数组里面的字段。