vue element-ui table中合计行背景色设置

最新推荐文章于 2024-04-15 17:21:17 发布
最新推荐文章于 2024-04-15 17:21:17 发布
阅读量1.8k 收藏
点赞数 3
分类专栏： element-ui table 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44862941/article/details/127363567
版权

刚开始打开控制台查找elements

这些在网页上直接修改都没有效果，直接将类名贴到代码去执行也没有效果

 后来我再这个地方加上background终于有了反应

 于是我就把它前面复制到代码里，/deep/一下

/deep/.el-table__footer-wrapper tbody td.el-table__cell {
	font-weight: 600;
	background: rgb(246, 238, 217);
}

 背景就出来了

奚琳
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue element-ui中table合计指定列求和实例
01-18
// 房间号的合计去掉 getSummaries (param) { const { columns, data } = param const sums = [] columns.forEach((column, index) => { if (index === 0) { sums[index] = '总计' } else if (index === 5 ||...
vue element-ui table 组件封装使用
最新发布
06-07
vue 在使用elementui的时候，table 会使用许多次，显示内容也不一致，封装之后，只需要配置就可以使用了，此资源仅适配了我常用的，如有其他需要，请自行修改
【el-table 表格合计、表格合并、指定行、列修改背景色 summary-method span-method row-class-name cell-style】
qq_20805455的博客
12-30 1886
el-table 表格合计、表格合并、指定行、列修改背景色 summary-method span-method row-class-name cell-styleelementUI el-table 表格修改 elementUI el-table 表格修改 1.表格合计 每列不同单位 2.表格合并 每列相同参数合并成一格 3.修改某行特定数据背景色 4.修改某列特定数据背景色 <el-table v-if="!loading" ref="exp
el-table表格的合计项单元格改变背景色
weixin_45646663的博客
08-13 1937
这是el-table表格的合计项，需要在有合计的地方改变背景色 用的是jquery来获取元素 // let addFontColor = setTimeout(()=>{ // console.log($(".w-table__footer-wrapper div").length-1) // for( var i = 0;i<$(".w-table__footer-wrapper div").length-1; i++){
element表格组件el-table行设置背景颜色
qq_40673807的博客
04-15 2362
*
悬浮el-table合并的单元格，背景色统一
qq_42122531的博客
05-25 1295
一、@cell-mouse-enter、@cell-mouse-leave、:row-class-name <el-table @cell-mouse-enter="cellMouseEnter" @cell-mouse-leave="cellMouseLeave" :row-class-name="tableRowClassName"> 二、定义一个空的属性 data(){ return{ ...
element table 合计行元素吸底+改变颜色
qq_41820599的博客
09-22 514
table加上 :row-class-name=“tableAddClass” 自定义行元素的class名。注意：要加z-index，不然被其他行覆盖起不到吸底效果。在函数中设置最后一行给class名。在style中定义class颜色。
element UI表格控制列行合并以及表格背景色控制
qq_40390762的博客
10-27 1236
vue - element - table
vue 中 elment-ui table合并上下两行相同数据单元格
10-15
本文将详细介绍如何在Vue中使用Element-UI的`el-table`组件来合并上下两行相同数据的单元格。 首先，我们需要在HTML模板中设置`el-table`组件。在以下示例中，我们定义了一个表格，包含四个列（项目名称、污染区段...
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
12-09
import TableComponents from "../../components/table/table"; //注册子组件table components: { tableC: TableComponents }, 获取表头和表内容数据。（真实数据应该是从接口获取的，由于是测试数据这里我先写死）...
vue element-ui table表格滚动加载方法
08-27
在本文中，我们将探讨使用 Vue 和 Element-UI 实现表格滚动加载的方法。本方法可以帮助开发者实现表格的无限滚动加载，提高用户体验。 一、添加全局注册事件 在实现表格滚动加载之前，我们需要添加一个全局注册...
【表格合并与底纹】vue-elementul表格简单实现合并单元格，与列和行给底纹颜色
seeeeeeeeeee的博客
12-23 1122
这是一个很常见的需求啊，因为很多公司都会涉及到写表格展示数据那么在某些公司内就会出现为了让数据更直观的感受到而让你给某些行和列用颜色标出来。使得看起来更方便那么这里就汇总一下常用的横竖合并以及横竖颜色底纹如何实现。
quasar UI和vue3根据列名的值改变整行的颜色
weixin_44498188的博客
09-20 588
quasar UI和vue3根据列名的值改变整行的颜色
el-table给合并行添加颜色
weixin_459417989的博客
11-21 1237
<template> <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" :span-method="spanMethod" > <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-colum
el-table设置边框颜色
pengpm的博客
07-27 1833
el-table去除边框
elementUI table 添加合计行，合计行放置顶部(标题下内容上)，合计行渲染所有数据的和(取后端接口数据)，合并合计单元格，给表头换颜色。
weixin_37739550的博客
02-21 2478
4.渲染合计，sumObj是通过后端接口得到的对应字段的合计（对象数据）。在并在此处调用合并“合计”文字的单元格。3.使用vue.$el.querySelector()方法,table渲染时，调用封装好的合并方法。1.将show-summary设置为true就会在表格尾部展示合计行。2.借用样式将合计行置顶。
vue+elementUI table 每列中含有相同值的单元格合并+单元格内容换行+取消鼠标悬停背景色
Christine的博客
12-28 2408
上一篇博客的合并只是针对某一列，这篇是针对每一列。
el-table 树形表格隔行变色后，树展开合并后隔行变色样式错乱
葡萄要吃山竹的博客
11-02 1530
el-table树形表格隔行变色，展开合并后样式出问题解决方法
el-table 动态合并单元格和给某一行添加颜色
m0_49016709的博客
09-28 1866
el-table 动态合并单元格和给某一行添加颜色
element ui设置table行色
08-16
要为Element UI的表格设置行色，有两种方式可以实现。 第一种方式是通过给表格的行元素添加类名来设置行色。你可以在表格的`<el-table>`标签上通过添加`row-class-name`属性来指定一个方法，这个方法会在每一行渲染时调用，你可以在这个方法中根据行数据的某个属性来返回对应的类名，然后使用CSS样式来定义这个类名的行色。例如： ```html <el-table :data="tableData" :row-class-name="getRowClassName"> <!-- 表格列定义 --> </el-table> <!-- 在Vue实例中添加一个方法 --> methods: { getRowClassName(row) { if (row.xxx === 'yyy') { return 'highlight-row'; // 自定义的类名 } return ''; } } ``` 然后在CSS中定义`.highlight-row`类名的样式即可。 第二种方式是通过修改Element UI的样式来设置行色。你可以使用深度选择器（`/deep/`）来覆盖Element UI的默认样式。例如，如果你想要设置表格的底部汇总行的背景色，可以使用如下代码： ```html <style> /deep/ .el-table__footer-wrapper tbody td.el-table__cell { background-color: #f6eed9; // 自定义的背景色 } </style> ``` 这样就可以修改表格底部汇总行的背景色了。 希望以上两种方式可以帮助到你！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [element ui设置table自适应表格宽，不自动换行](https://blog.csdn.net/qq_67519713/article/details/130783288)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [vue element-ui table中合计行背景色设置](https://blog.csdn.net/weixin_44862941/article/details/127363567)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值