el-table中如何将汇总数据放于第一行，同时自定义相关的合并数据值，并且固定第一行

最新推荐文章于 2024-10-31 14:12:45 发布

原创

最新推荐文章于 2024-10-31 14:12:45 发布 · 2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#elementui

该博客展示了如何利用Element-UI库在Vue.js应用中创建一个带有动态汇总功能的表格。通过`show-summary`和`:summary-method`属性，结合`getSummaries`方法实现了点击表格显示/隐藏总计行。同时，通过CSS调整了表格部分的布局，使其保持固定。

具体效果演示

在这里插入图片描述

关键代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>点击相关按钮出现相关的div，div出现后点击除div外的其它地方隐藏相关的div</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 必须先引入vue,后使用element-ui -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element 的