element表格el-table对指定行设置背景颜色

示例:对当天(星期几)的数据设置背景色

使用 :row-class-name 实现

html 复制代码
<el-table :data="tableData" style="width: 100%" border :row-class-name="tableRowClassName">
    <el-table-column prop="week" label="星期" width="180" align="center">
    </el-table-column>
	...
</el-table>

如果该行数据的星期是当天,则返回样式 choose-row

js 复制代码
//指定行颜色
tableRowClassName: function ({ row, rowIndex }) {
    if (row.week == this.week) {
        return 'choose-row';
    }
},
html 复制代码
<style>
    .choose-row {
        background-color: #f5f7fa !important;
    }
</style>

更多技术干货,请持续关注程序员大佬超。

原创不易,转载请注明出处。

相关推荐
2301_7816686116 分钟前
前端基础 JS Vue3 Ajax
前端
上单带刀不带妹39 分钟前
前端安全问题怎么解决
前端·安全
Fly-ping42 分钟前
【前端】JavaScript 的事件循环 (Event Loop)
开发语言·前端·javascript
SunTecTec1 小时前
IDEA 类上方注释 签名
服务器·前端·intellij-idea
在逃的吗喽2 小时前
黑马头条项目详解
前端·javascript·ajax
袁煦丞2 小时前
有Nextcloud家庭共享不求人:cpolar内网穿透实验室第471个成功挑战
前端·程序员·远程工作
小磊哥er2 小时前
【前端工程化】前端项目开发过程中如何做好通知管理?
前端
拾光拾趣录2 小时前
一次“秒开”变成“转菊花”的线上事故
前端
你我约定有三3 小时前
前端笔记:同源策略、跨域问题
前端·笔记
JHCan3333 小时前
一个没有手动加分号引发的bug
前端·javascript·bug