提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
小菜鸡记录一下学习到的知识,如有错误欢迎指正
一、如何给基于Element-UI的表格添加背景颜色?
根据项目的要求给相对应的行填加背景颜色和设置字体样式。
二、使用步骤
1.复制Element-UI的Table
代码如下(示例):
第一种实现方式:
<el-table
v-loading="loading"
:data="tableData"
:row-class-name="className"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
第二种实现方式:
<el-table
v-loading="loading"
:data="tableData"
:row-class-name="className"
style="width: 100%">
<el-table-column
prop="0"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="1"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="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。