Vue Element 树形表格汇总行(show-summary)实现指南

在 Vue 和 Element UI 中，可以使用树形表格（Tree Table）来展示数据，并且使用'show-summary'属性来显示汇总行。

首先，你需要安装 Vue 和 Element UI，并在你的项目中引入和注册它们。

然后，你可以使用 Element UI 的 Table 组件来创建树形表格。在 Table 组件上设置'tree'属性为 true，这将把表格的数据渲染为树形结构。

接下来，你可以在表格的列定义中使用 scoped slot 来定义汇总行的内容。使用 Element UI 的 Table Column 组件的 scoped slot，你可以自定义每列的内容。

在你的模板中，你可以添加一个'template'标签，并在其中定义一个'slot-scope'属性。在'slot-scope'属性中，你可以访问当前行的数据，并根据需要显示汇总行。

下面是一个示例代码：

<template>
  <el-table :data="tableData" :tree="true" :show-summary="true">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column label="Summary">
      <template slot-scope="scope">
        <div v-if="scope.$index === 0">Total:</div>
        <div>{{ totalAge }}</div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'John Smith',
          age: 30,
        },
        {
          name: 'Jane Doe',
          age: 25,
        },
        {
          name: 'Bob Johnson',
          age: 35,
        },
      ],
    };
  },
  computed: {
    totalAge() {
      return this.tableData.reduce((total, row) => total + row.age, 0);
    },
  },
};
</script>

在上面的示例中，我们使用了一个计算属性'totalAge'来计算年龄的总和。在汇总行的 scoped slot 中，我们在第一行显示了'Total:'，并在下面显示了计算的总和。

注意，我们在'el-table-column'上使用了'show-summary'属性来显示汇总行。

希望这可以帮助到你！