element-ui中table表格页面汇总固定在第一行

最新推荐文章于 2024-09-25 10:00:00 发布

xxqxxz

最新推荐文章于 2024-09-25 10:00:00 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： elementUI后台系统文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/xxqxxz/article/details/121513425

elementUI后台系统专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在使用Element-UI框架的table组件时，实现表格的表头固定以及添加表尾合计行的功能。通过设置'show-summary'字段，并可自定义合计行显示文字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图
在这里插入图片描述

首先需要以下样式--注意加入/deep/
  /deep/ .el-table {
    display: flex;
    flex-direction: column;
  }
  /deep/ .el-table__body-wrapper {
    order: 1;
  }
  /deep/ .el-table__fixed-body-wrapper {
    top: 96px !important;
  }
  /deep/ .el-table__fixed-footer-wrapper {
    z-index: 0;
  }
 // 改变第一行的样式
 /deep/ .el-table__footer-wrapper tbody td {
	    color: #1ebeae;
	    background: rgba(235, 245, 243, 0.4);
	    cursor: pointer;
  }

接着需要使用element-ui框架中的table模块里面的表尾合计行
在这里插入图片描述
在table表头里面配置 show-summary 字段如需要特殊名字可以追加配置sum-text

  <el-table
    :data="tableData"
    border
    show-summary
    sum-text='北京市'
    style="width: 100%">