element-ui - 自定义表格最后一行内容？

Question

如果所示，想实现最后一列实现商品总计展示,写了一个计算属性想通过show-summary、@summary-method方法来实现展示,还想实现合计后面的列合并成一列展示（想的是操作样式来隐藏右边框，但是没实现！！！）

贴上我的代码：

<template>  <el-table    :data="tableData"    border    :summary-method="getSummaries"    show-summary    style="width: 100%; margin-top: 20px"  >    <el-table-column prop="fruit" label="水果" width="180" />    <el-table-column prop="price" label="价格" />    <el-table-column label="数量" prop="num">      <template #default="{ row }">        <el-input-number          v-model="row.num"          :min="1"          :max="10"        />      </template>    </el-table-column>    <el-table-column label="操作">      <template #default="scoped">        <el-button type="danger" size="small">删除</el-button>      </template>    </el-table-column>  </el-table></template><script lang="ts" setup>import { ref, computed } from "vue";interface Fruit {  fruit: string;  price: number;  ischeck: boolean;  id: number;  num: number;}const tableData = ref<Fruit[]>([  {    fruit: "苹果",    price: 10,    ischeck: true,    id: 1,    num: 1,  },  {    fruit: "猕猴桃",    price: 10,    ischeck: true,    id: 1,    num: 1,  },  {    fruit: "李子",    price: 10,    ischeck: true,    id: 1,    num: 1,  },  {    fruit: "榴莲",    price: 10,    ischeck: true,    id: 1,    num: 1,  },]);interface Product {  id: string  name: string  amount1: string  amount2: string  amount3: number}const getSummaries = (param: any):any => {  const { columns, data } = param  console.log(columns);    let sums = ['合计', 380,getAllTotal]  return sums}const getAllTotal = computed(() => {  return tableData.value.reduce((cur, item) => {    return cur + item.num * item.price;  }, 0);});</script><style lang="scss">.el-table__footer-wrapper{  tr:not-child(:first-child){    td{      border-right: none !important;    }  }}</style>

最后想实现的效果图：

Answer 1

合并单元格别修改样式，官方有提供的合并方法呢:span-method="arraySpanMethod"
使用合计那个，应该是

      const { columns, data } = param;      const sums = [];      columns.forEach((column, index) => {        const values = data.map((item) => Number(item[column.property]));          sums[index] = values.reduce((prev, curr) => {            // 计算总计逻辑          }, 0);        }     return sums;