前言

小菜鸡记录一下学习到的知识，如有错误欢迎指正

一、如何给基于Element-UI的表格添加背景颜色？

根据项目的要求给相对应的行填加背景颜色和设置字体样式。

二、使用步骤

1.复制Element-UI的Table

代码如下（示例）：
第一种实现方式：

<el-tablev-loading="loading":data="tableData":row-class-name="className"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>

第二种实现方式：

<el-tablev-loading="loading":data="tableData":row-class-name="className"style="width: 100%"><el-table-columnprop="0"label="日期"width="180"></el-table-column><el-table-columnprop="1"label="姓名"width="180"></el-table-column><el-table-columnprop="2"label="地址"></el-table-column></el-table>

2.js实现代码

代码如下（示例）：
第一种实现方式：

   // 合计行添加样式className(row) {let result = row.rowIndex;if(result === 0){return "heji"}else if(result === 1){return "heji"}else if(result === 2){return "heji"}else if(result === 3){return "heji"}else if(result === 4){return "heji"}else if(row.row.name === "园区1"){return "xbiaoti";}else if (row.row.name === "园区2") {return "xbiaoti";} else if (row.row.name === "园区3") {return "xbiaoti";} else if (row.row.name === "园区4") {return "xbiaoti";} else{return ""}},

第二种实现方式：

className1(row) {let result = row.rowIndex;let arr = row.row;if (arr[0].indexOf("行业合计") > -1) {return "heji";} else if (result === 1) {return "heji";} else if (result === 2) {return "heji";} else if (result === 3) {return "heji";} else if (result === 4) {return "heji";} else if (arr[0].indexOf("行业1合计") > -1) {return "heji";} else if (arr[0].indexOf("行业2合计") > -1) {return "heji";} else if (arr[0].indexOf("行业3合计") > -1) {return "heji";} else if (arr[0].indexOf("行业4合计") > -1) {return "heji";} else if (arr[0].indexOf("园区1") > -1) {return "xiaoji";} else if (arr[0].indexOf("园区2") > -1) {return "xiaoji";} else if (arr[0].indexOf("园区3") > -1) {return "xiaoji";} else if (arr[0].indexOf("园区4") > -1) {return "xiaoji";} else {return "";}},

3.css实现代码

.heiji {background-color: skyblue !important;color: black;
}
.xbiaoti {background-color: skyblue !important;color: black;
}

总结

调用row-class-name方法，行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。

如何给基于Element-UI的表格添加背景颜色相关推荐

QT tableWidget给单个表格添加背景颜色
QT tableWidget给单个表格添加背景颜色代码示例 QWidget *widget = new QWidget(); QString wStyle = QString("backg ...
element ui border表头设置背景颜色
<el-table :data="list" v-loading="listLoading" element-loading-text="给我一 ...
element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
element UI 修改表格边框颜色
element UI 修改表格边框颜色由于我只想要改变该页面的表格边框颜色,加上表格类名 /** 改变边框颜色*/.right-content .el-table--border, .el-tabl ...
【vue】Element UI实现表格表头纵向显示
element实现表格表头纵向显示我们正常使用Element UI写表格的时候,<el-table-column/> 标签里面都是纵向的.那么我们的需求有时候会要求行列转换,那么来看看咋 ...
【教程】Spire.PDF教程：如何给PDF添加背景颜色和平铺背景图
Spire.PDF是一个专业的PDF组件,能够独立地创建.编写.编辑.操作和阅读PDF文件,支持 .NET.Java.WPF和Silverlight.Spire.PDF的PDF API拥有丰富的功能, ...
python加颜色_python抠图和添加背景颜色
项目概况简介:通过调用removebg库去除照片中的背景,也可以通过调用PIL库添加背景,这样可以用来实现证件照的背景颜色更换,比如生成白色.蓝色和红色代码流程:输入-要得到的图片背景处理效果 A- ...

如何给基于Element-UI的表格添加背景颜色

文章目录

前言

一、如何给基于Element-UI的表格添加背景颜色？

二、使用步骤

1.复制Element-UI的Table

2.js实现代码

3.css实现代码

总结

如何给基于Element-UI的表格添加背景颜色相关推荐

最新文章

热门文章