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>

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

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

相关推荐
Hooray33 分钟前
为了在 Vue 项目里用上想要的 React 组件,我写了这个 skill
前端·ai编程
咸鱼翻身了么35 分钟前
模仿ai数据流 开箱即用
前端
风花雪月_35 分钟前
🔥IntersectionObserver:前端性能优化的“隐形监工”
前端
Bigger35 分钟前
告别 AI 塑料感:我是如何用 frontend-design skill 重塑项目官网的
前端·ai编程·trae
发际线向北35 分钟前
0x02 Android DI 框架解析之Hilt
前端
zhensherlock1 小时前
Protocol Launcher 系列:Overcast 一键订阅播客
前端·javascript·typescript·node.js·自动化·github·js
liangdabiao1 小时前
开源AI拼豆大升级 - 一键部署cloudflare page - 全免费 web和小程序
前端·人工智能·小程序
SuperHeroWu72 小时前
【鸿蒙基础入门】概念理解和学习方法论说明
前端·学习·华为·开源·harmonyos·鸿蒙·移动端
Full Stack Developme2 小时前
MyBatis-Plus 流式查询教程
前端·python·mybatis
用户412467508372 小时前
用 Locust 压测一个网站,记录一下学习过程
前端