vue element ui how to create multiple summary rows

Question

I am trying to use the data table component from element ui, but seems to run into an issue with the summary rows feature. it seems like you can only create one summary row, and if i try to return multiple values it just breaks the table. the code is pretty much the same as in the documentation itself.

I am looking for a hack or maybe a replacement?

Would like to know if anyone ever did something similar.

Thank you.

Answer 1

Officially it is not possible, as element-ui generates a separate table for the summary, which also ensures the summary is sticky (if you specify an height for the table). However if you don't care about the stickiness for the summary there are two possible ways

1. Adding extra rows to the data set your self.

2. Use the append slot. (Which generates "extra" rows before the summary)

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

I think the second solution is cleaner, however you have style the append row/columns your self in order to make it the same as the rest of the table. Where in the first solution this is for free.