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

最新推荐文章于 2025-04-02 15:07:25 发布

好事总会发生在下个转弯

最新推荐文章于 2025-04-02 15:07:25 发布

阅读量1.9k

点赞数 2

分类专栏：功能文章标签： elementui

本文链接：https://blog.youkuaiyun.com/drawlessonsfrom/article/details/119914348

版权

功能专栏收录该内容

13 篇文章

订阅专栏

具体效果演示

在这里插入图片描述

关键代码

<!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 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-table__footer-wrapper {
            position: absolute;
            top: 48px;
            left: 0;
        }
        .el-table__body-wrapper {
            margin-top: 48px;
        }
    </style>
</head>
<!-- :span-method="arraySpan" :summary-method="getSum" -->
<body>
    <div id="app">
        <el-table :data="tableData" border stripe show-summary style="width: 100%" height="30vh" :summary-method="getSummaries">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    tableData: [{
                            date: '2016-05-02',
                            name: '10',
                            address: '10'
                        }, {
                            date: '2016-05-04',
                            name: '10',
                            address: '10'
                        }, {
                            date: '2016-05-01',
                            name: '10',
                            address: '10'
                        }, {
                            date: '2016-05-03',
                            name: '10',
                            address: '10'
                        }
                    ]
                }
            },
            methods: {
                getSummaries({columns, data}) {
                    let sums = ['合计', '', 35]
                    return sums
                }
            }
        })
    </script>
</body>

</html>

代码关键点

show-summary
:summary-method="getSummaries"
getSummaries({columns, data}) {
    let sums = ['合计', '', 35]
    return sums
}

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

具体效果演示

关键代码

代码关键点

相关表格固定，使用css样式进行控制