el-table 动态给每行增加class属性的示例代码

更新时间：2025年03月31日 10:52:52 作者：最初@

这篇文章主要介绍了el-table 动态给每行增加class属性的示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

el-table 动态给每行增加class属性

html代码

row-class-name属性，绑定方法
:row-class-name=“tableRowClassName”,

<el-table :data="tableData" border :row-class-name="tableRowClassName">
</el-table>

js代码

tableRowClassName({row, rowIndex})，接受到两个参数
① row，行数据
② rowIndex，行索引

tableRowClassName({row, rowIndex}) {
	// 根据每行的数据，判断isError来增加class属性
	if (row.row.isError === true) {
      return 'warning-row'
    } else {
      return 'success-row'
    }
    // 根据行索引判断，增加class属性
	if (rowIndex === 1) {
	  return 'warning-row';
	} else if (rowIndex === 3) {
	  return 'success-row';
	}
	return '';
}

css代码

<style lang="scss" scoped>
::v-deep .el-table .warning-row {
  color: #f24835 !important;
  td{
    color: #f24835 !important;
  }
  }
::v-deep .el-table .success-row{
  color: #00c617 !important;
  td{
    color: #00c617 !important;
  }
}
</style>

到此这篇关于el-table 动态给每行增加class属性的文章就介绍到这了,更多相关el-table 增加class属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue+element使用row-class-name修改el-table某一行解决背景色无效的方法

基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
今天小编就为大家分享一篇基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue vue-touch移动端手势详解
这篇文章主要介绍了vue vue-touch移动端手势详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
vue解析指令compile源码层面使用解析
这篇文章主要为大家介绍了Vue编译器解析compile源码解析示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
Vue2 Observer实例dep和闭包中dep区别详解
这篇文章主要为大家介绍了Vue2 Observer实例dep和闭包中dep区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
十分钟带你快速上手Vue3过渡动画
在开发中我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,下面这篇文章主要给大家介绍了关于如何快速上手Vue3过渡动画的相关资料,需要的朋友可以参考下
2022-02-02
Vue+UpLoad实现上传预览和删除图片的实践
本文主要介绍了Vue+UpLoad实现上传预览和删除图片的实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
vue中element-ui组件默认css样式修改的四种方式
在前端项目中会运用各种组件,有时组件的默认样式并不是你项目中所需要的,你需要更改样式,下面这篇文章主要给大家介绍了关于vue中element-ui组件默认css样式修改的四种方式,需要的朋友可以参考下
2021-10-10
Vue中使用Tiptap富文本编辑器的方法指南
Tiptap是一个无头（headless）的富文本编辑器框架,专为 Web 工匠设计,它提供了高度可定制和可扩展的编辑器功能,适用于各种前端框架,这篇文章主要介绍了Vue中使用Tiptap富文本编辑器的相关资料,需要的朋友可以参考下
2026-02-02
Vue移动端实现调用相机扫描二维码或条形码的全过程
最近在使用vue开发的h5移动端想要实现一个调用摄像头扫描二维码的功能,所以下面这篇文章主要给大家介绍了关于Vue移动端实现调用相机扫描二维码或条形码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
Vue.js学习教程之列表渲染详解
这篇文章主要给大家介绍了关于Vue.js列表渲染的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-05-05