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

Posted 2023-02-23

【中文标题】vue element ui如何创建多个汇总行

【英文标题】：vue element ui how to create multiple summary rows

【发布时间】：2021-08-13 11:55:15

【问题描述】：

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

我正在寻找破解或替代品？

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

谢谢。

【参考方案1】：

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

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

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

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

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

【讨论】：

感谢您的回复。我已经尝试过这种方式，当然可以，但是对表格进行排序会导致它与其余数据混合，这就是为什么我需要以某种方式排除它。

实现自己的排序方法可以将列放在同一位置