改变elementui中table组件底部合计栏的样式

最新推荐文章于 2023-06-28 13:46:01 发布
最新推荐文章于 2023-06-28 13:46:01 发布
阅读量1.1w 收藏 5
点赞数 3
分类专栏： 经验 文章标签： elementUI vuejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wufantastic/article/details/100182937
版权

昨天搜索了下这个问题发现没有一个较为满意的答案，在自己解决后给大家分享一下。

官方未提供直接修改类名或者slot的方式，在查看源码后，发现它底部合计是一个独立table会使用和上面展示数据同一列的类名，也就是在对应列设置下图箭头所指属性，然后在全局css编写样式即可，注意一点的就是如果是我这种绑定了data的，要先把data里面的class-name算出来再让表格渲染

      

wufantastic
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue+elementUI组件table实现前端分页功能
10-15
主要为大家详细介绍了vue+elementUI组件table实现前端分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
VUE + elementui-table组件 在table-cell单元格中绘制微型echarts图
01-08
需求效果图示例 / 日均销量 昨日累计销量
element-ui 表格总计有多行的情况
weixin_41184962的博客
06-30 729
element-ui 表格总计 多行官网文档里面 表格的 自定义 总计，但是只能返回单行总计；如果需求需要 多行总计，着实不知到怎么办了，上网查了，这个自定义方法可以返回 html,所以就此粗暴的解决了 多行总计...
Vue使用ElementUI的el-table组件，处理合计行问题
小张写bug的博客
04-15 1万+
目录标题一、合计行，在需要的时候调用显示1.1 问题和现象1.2 解决方案二、合计行不显示2.1 问题和现象2.2 解决方案 一、合计行，在需要的时候调用显示 ElementUI在使用el-table做合计行时，官方文档说明如下： 参考地址：https://element.eleme.cn/#/zh-CN/component/table 将show-summary设置为true就会在表格尾部展示...
element ui 表格统计行统计多条字段数据以及设置统计行样式
Raken12的博客
02-07 3978
element ui 表格统计行的操作 1.统计行显示多条统计数据（效果如下图） 根据element ui文档
【前端vue+elemenui】el-table根据表格数据设置整行样式或单元格样式
qq_58559853的博客
06-01 3079
根据table绑定的数据设置不同的行或列样式
vue3+ElementPlus: 调整el-table表格的默认样式
最新发布
扬雨于今
06-28 1841
需求：调整el-table表格的默认样式，直接在el-table和el-table-column上设置style并不会生效，需要在调试模式下（鼠标右击，选择“检查”）查看表格元素的实际位置，并设置其样式。
element-ui 消息提示框(message)样式修改
sumimg的博客
11-06 1万+
请求成功的消息提示框，修改字体大小和其他样式，也可以修改icon的样式 /*alert 成功弹出框样式*/ .el-message--success { top: 80px !important; } .el-message .el-icon-success { font-size: 18px; } .el-message--success .el-message__content { font-size: 18px; font-weight: 700; } 调整页面停留时间 t.
elementui 展示列表模板_足足128张财务报表模板，会计老张花费十年总结，小白不要错过...
weixin_34551614的博客
12-11 808
【足足128张财务报表模板，会计老张花费十年总结，小白不要错过】会计小白刚入职会面临很多烦恼，特别是财务报表的编制，真的是一个非常麻烦的事，今天小编为大家分享一份财务报表模板，足足128张，需要的小伙伴不要错过哦，一起来看看吧！现金收支出纳表(通用模板、方便管理、简约简单模板)收支明细表—类别统计图表(自动按列表统计、自动展示图表、自动汇总收入总额支出总额)财务部差旅费预算分析表财务收支明细表财务...
elementUI table 添加合计行，合计行放置顶部(标题下内容上)，合计行渲染所有数据的和(取后端接口数据)，合并合计单元格，给表头换颜色。
weixin_37739550的博客
02-21 2287
4.渲染合计，sumObj是通过后端接口得到的对应字段的合计（对象数据）。在并在此处调用合并“合计”文字的单元格。3.使用vue.$el.querySelector()方法,table渲染时，调用封装好的合并方法。1.将show-summary设置为true就会在表格尾部展示合计行。2.借用样式将合计行置顶。
elementUI table组件
11-09
elementUI table组件 使用vue组件编写的el-table 反正就是一个表格组件， <el-table ref="table" v-loading="pageParm.loading" :max-height="pageParm.tableHeight || undefined" :data="data" :default-...
解决vue elementUI中table里数字、字母、中文混合排序问题
10-15
主要介绍了vue elementUI中table里数字、字母、中文混合排序问题,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
elementUI中Table表格问题的解决方法
12-12
如上图，在当前导航表格table样式是没问题的，但当我点击别的导航去到另外的页面，然后再回到之前的导航页面，表格table的样式就会混乱，随便点击当前页面或刷新亦或拉伸页面，样式又恢复正常,很奇怪的样式问题。...
git使用代理出现LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443 错误
热门推荐
wufantastic的博客
06-12 4万+
日期：2019-06-12 操作系统：MAC OS 10.13.6 git版本：2.15.2 设置了ssr作为git代理在执行git pull时出现LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443错误 是由于ipv6引起的 执行networksetup -setv6off Wi-Fi即可 来源：...
mysql关于in大量数据的解决办法
wufantastic的博客
06-15 3万+
*** 注意：该办法适用于没办法使用跨库软连接或者中间件的情况 有些经验的都知道，mysql在in大量数据时会出现不走索引的现象，查了很多资料，解决办法主要是将in改为join,但是实际业务中可能会出现从其他库查过来的大量id，例如A库查到老师下面所有的学生id，B库根据学生id去查询统计做题信息等等。 由于同一个请求中会有很多维度数据需要统计，所以我的办法是在最开始创建一个内存临时表，然后后...
记一次解决chrome浏览器ERR_SPDY_PROTOCOL_ERROR错误
wufantastic的博客
07-16 2万+
环境： centos nginx 1.14 php7.1 ssl服务商 let's encrypt 前后端分离 Laravel + vuejs + axios 最近一次把网站升级为https时遇到个问题，火狐浏览器上运行，请求Api没有问题，chrome上option请求报ERR_SPDY_PROTOCOL_ERROR的错误，...
解决https页面下不能加载http资源的问题
wufantastic的博客
05-26 2万+
最近因为引入第三方服务，遇到一个https下加载http跨域(js和websocket)的问题，我当时想到有两种方案： 1. 将js相关的逻辑写到自己的http网站里，然后用iframe引入该页面(此处比较简单不作太多概述)，弊端就是原网站的很多代码不能重用，相互之间传递比较麻烦。 2.用自己的https网站代理第三方的http服务，因为操作简单，这里只提供思路，需要解决问题的同学只需搜索"n...
mysql关于group by加count的优化
wufantastic的博客
12-19 3654
很多时候我们需要查询类似于所有人做题量之类的查询，一般第一时间想到的会是group by 加count，这个在数据量不大的情况下还没问题，但数据达到百万级别就会是很大的问题，因为group by的字段如果过多会出现索引失效，例如以下例子： * 该表主要为了给大家看个结构，有删减 CREATE TABLE `practice_answer_log` ( `id` int(11) unsig...
Elementui中table组件暂无数据样式在屏幕中间
06-07
对于ElementUI的table组件，可以使用`show-empty`属性来设置是否显示暂无数据的样式。默认情况下，该属性的值为`false`，即不显示暂无数据的样式。如果要在屏幕中央显示暂无数据的样式，可以按照以下步骤操作： 1. 在table组件中添加`show-empty`属性，将其值设置为`true`。 ```html <el-table :data="tableData" show-empty> <!-- 表格列 --> </el-table> ``` 2. 在表格外层包裹一个div，并设置其样式为屏幕居中。 ```html <div class="table-container"> <el-table :data="tableData" show-empty> <!-- 表格列 --> </el-table> </div> ``` ```css .table-container { display: flex; justify-content: center; align-items: center; height: 100%; } ``` 这样就能够在屏幕中央显示暂无数据的样式了。同时，如果需要自定义暂无数据的样式，可以使用`empty-text`属性来设置显示的文本或HTML代码。 ```html <el-table :data="tableData" show-empty empty-text="暂无数据"> <!-- 表格列 --> </el-table> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值