Vue Element 树形表格合计行 - show-summary 属性使用教程

<template>
  <el-table :data="tableData" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" show-summary>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="score" label="Score"></el-table-column>
    <el-table-column label="Total Score" :summary-method="getTotalScore"></el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'John',
          age: 25,
          score: 80,
          children: [
            {
              name: 'Alice',
              age: 22,
              score: 90
            },
            {
              name: 'Bob',
              age: 24,
              score: 85
            }
          ]
        },
        {
          name: 'Tom',
          age: 28,
          score: 75
        }
      ]
    };
  },
  methods: {
    getTotalScore({ columns, data }) {
      const column = columns.find(c => c.property === 'score');
      const total = data.reduce((sum, item) => {
        if (item.children) {
          return sum + this.getTotalScore({ columns, data: item.children });
        }
        return sum + item[column.property];
      }, 0);
      return 'Total: ' + total;
    }
  }
};
</script>
<p>在这个示例中，我们使用 <code>show-summary</code> 属性来显示合计行。然后，我们在 <code>el-table-column</code> 中使用 <code>summary-method</code> 属性来指定一个方法 <code>getTotalScore</code>，该方法用于计算合计行的总分数。</p>
<p>在 <code>getTotalScore</code> 方法中，我们使用递归来遍历表格数据并计算总分数。对于每个数据项，如果它有子项，则递归调用 <code>getTotalScore</code> 方法来计算子项的总分数。最后，我们返回一个带有总分数的字符串，这将显示在合计行中。</p>
<p>请注意，为了使表格成为树形表格，我们使用了 <code>tree-props</code> 属性，其中 <code>children</code> 属性指定了子项的属性名，<code>hasChildren</code> 属性指定了判断是否有子项的方法。</p>