vue表格el-table取到某一列求和的值

elementUI官网给的求和方法只能在表尾显示，但这并不适用于现实开发。
网上给的解决方法大多没有用，希望这篇文章能帮到你。

实际开发例子：
需求：在表前位置显示电解液量总和

解释：
sumAmount.toFixed(1)的toFixed()是显示小数后几位。
tableData是你在定义的:data=“tableData”。
electLiquid是你需要求和的列在定义的 prop=“electLiquid”。
所以：
只需要修改tableData、electLiquid成你自己定义的，computed这边直接复制粘贴。

<p class="p3">
                保管（処理前）LiBの電解液総量:
                <span>{{ sumAmount.toFixed(1) }}</span
                >L
            </p>
            <el-row :gutter="20" class="row2">
                <el-table
                    :data="tableData"
                    border
                    height="340"
                    :row-style="{ height: '20px' }"
                    :cell-style="{ padding: '0px' }"
                    size="mini"
                    header-row-class-name="tableHead"
                >
                    <el-table-column
                        type="index"
                        :index="indexMethod"
                        align="center"
                    >
                    </el-table-column
                    ><el-table-column label="選択" align="center">
                        <el-table-column
                            type="selection"
                            width="75"
                            align="center"
                        >
                        </el-table-column
                    ></el-table-column>
                    <el-table-column
                        prop="getDate"
                        label="処理施設引取日"
                        sortable
                        width="160"
                        align="center"
                    ></el-table-column
                    ><el-table-column
                        prop="ctrlNum"
                        label="荷姿管理番号"
                        sortable
                        width="150"
                        align="center"
                        ><template scope="scope">
                            <div
                                class="sub-body"
                                @click="showinfoDetail(scope.row)"
                            >
                                {{ scope.row.ctrlNum }}
                            </div>
                        </template></el-table-column
                    ><el-table-column
                        prop="shipComp"
                        label="受託運搬会社"
                        width="150"
                        align="center"
                    ></el-table-column
                    ><el-table-column
                        prop="delivComp"
                        label="搬入運搬会社"
                        sortable
                        width="150"
                        align="center"
                    ></el-table-column
                    ><el-table-column
                        prop="statusType"
                        label="荷姿状態
                            LiB種類"
                        sortable
                        width="140"
                        align="center"
                    ></el-table-column
                    ><el-table-column
                        prop="electLiquid"
                        label="電解液量"
                        sortable
                        class="tablecolum1"
                        align="center"
                    ></el-table-column
                    ><el-table-column
                        prop="proCplDate"
                        label="中間処理完了日"
                        sortable
                        width="160"
                        align="center"
                    ></el-table-column
                    ><el-table-column
                        prop="finCplDate"
                        label="最終処分完了日"
                        sortable
                        width="160"
                        align="center"
                    ></el-table-column></el-table
            ></el-row>

<script>
export default {
computed: {
        sumAmount() {
            return this.tableData
                .map(row => row.electLiquid)
                .reduce((acc, cur) => parseFloat(cur) + acc, 0);
        }
    }
}
</script>

本文参考自： 解决vue 表格table列求和的问题