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

Question

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

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

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

谢谢你。

标签： javascriptvue.jselement-uivue-tables-2

Answer 1

官方是不可能的，因为 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>
   

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