vue element ui 如何创建多个汇总行

问题描述

我正在尝试使用元素 ui 中的数据表组件，但似乎遇到了汇总行功能的问题。 似乎您只能创建一个摘要行，如果我尝试返回多个值，它只会破坏表格。 代码与 documentation itself 中的代码几乎相同。

我正在寻找黑客或替代品？

想知道是否有人做过类似的事情。

谢谢。

解决方法

官方上是不可能的，因为 element-ui 会为汇总生成一个单独的表格，这也确保了汇总的粘性（如果您为表格指定了高度）。但是，如果您不关心摘要的粘性，则有两种可能的方法

1. 向您自己的数据集添加额外的行。

2. 使用附加槽。 （在摘要前生成“额外”行）

   <el-table>
       ...
       <template v-slot:append>
           <tr>
               <td>Hello world</td>
           </tr>
           <tr>
               <td>Hello world</td>
           </tr>
       </template>
   </el-table>
   

我认为第二个解决方案更简洁，但是您可以自行设置附加行/列的样式，以使其与表格的其余部分相同。在第一个解决方案中，这是免费的。