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

如图

首先需要以下样式--注意加入/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"bordershow-summarysum-text='北京市'style="width: 100%">

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

使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格上一篇: MongoDB 聚合下一篇: vue router 路由守卫登录验证 https://github.com/SheetJS ...
Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...
Element ui中table标签上下滚动时表格错位
在style中加 /deep/.el-table__fixed-body-wrapper .el-table__body {padding-bottom: 20px; }
element ui的table表格因竖向滚动条导致表头错位问题解决
在vue项目中引入table组件,当将表格高度固定出现竖向滚动条,而且横向滚动条滚到最右边时,就会出现表头与内容错位的问题,如图解决方法: Step1:在app.vue中加入css样式 <st ...
Element UI 之table表格表头过长使用点点...显示，并添加鼠标移入悬浮显示
需求: 鼠标移入表头: 关键点: 1.样式中添加 .el-table .cell {word-break: keep-all !important;white-space: nowrap !impor ...
Element UI 之table表格的封装
需求: 鼠标移入: 实现: <template><el-tableclass="table-list":data="tableData"hei ...
element ui中table合并相同内容单元格
一.遍历需要合并的集合,定义spanArr数组二.在table中增加事件三.调用objectSpanMethod方法,合并单元格

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

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

最新文章

热门文章