elemtnui 表格如何修改某行文字颜色（elemtnui table 修改某行文字颜色）

项目中用到了elementui的表格,需要根据不同状态显示不同颜色

首先，我们在el-table标签中加入 :row-class-name=“tableAddClass” ，双引号自定定义命名。

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

接着在methods中写入下放代码

tableAddClass({row,rowIndex}) {if (row.is_halt) {return 'tr-red';}return '';
}

row是当前行的数据，你可以获取row下任意字段进行判断，举个例子，我通过字段 is_halt判断是否为true 添加类名 “tr-red”，根据自己的需求去判断（您可以根据自己的需求判断多个，定义多个css样式，你开心就好）。

rowIndex为当前行的索引。

最后，我们需要在CSS中定义颜色样式

<style scoped>/deep/.el-table .tr-red {color: red !important;}
</style>

elemtnui 表格如何修改某行文字颜色（elemtnui table 修改某行文字颜色）相关推荐

(VBA)Word中对选中的行（代码行）自动编号并修改注释的颜色
说实话,CSDN的这个插入代码的控件很好用,特别是自动添加行号的功能. 下面这段VBA代码就是在Word中,对你编辑的代码添加行号和对"//"以后的注释部分加上颜色. 用法:选中你 ...
dw更改外接样式表html,dw如何单独改字体颜色 DW怎么修改单个链接文字颜色？
在DW中如何改变CSS中的字体大小和颜色? 首先,打开html编辑器,新建html文件,例如:index.html. 在index.html中的标签中,输入css代码: div{background- ...
选中表格行高亮html,table选中的行以指定颜色高亮显示
table选中的行以指定颜色高亮显示 1 三星 AA 2 Norkia BB 3 苹果 CC 4 联想 DD
echarts环形图高亮提示文字位置位于中间_CAD多行文字的格式设置
不同版本的界面不太一样,低版本或用经典界面弹出的是工具栏,高版本的RIBBON界面是命令面板,不同版本功能也略有差异,版本如果过低,功能非常少.这里以2014版为例来给大家介绍,下图是2014版的文字 ...
03-07 创建和编辑AutoCAD实体（七）向图形中添加文字（3）使用多行文字
3.Use MultilineText (MText)使用多行文字(MText命令) For long, complex entries, createmultiline text (MText). ...
MySQL常见问题的解决，root用户密码忘记，不是内部或外部命令，修改数据库和表的字符编码，命令行客户端的字符集问题
文章目录问题1:root用户密码忘记,重置的操作问题2:mysql命令报"不是内部或外部命令" 问题3:错误ERROR :没有选择数据库就操作表格和数据问题4:命令行客户端的 ...
layui 行变灰_layui table设置某一行的字体颜色方法
table自带的可以设置某一个单元格颜色,必须根据内容来修改,对于很多列同时修改并不方便,直接使用js操作比较简单. 首先自定义一个div,内部存放table,根据class找到table,然后找到行 ...
已知数据库中存在表tb_book2,通过在图书信息界面填写书本的基本信息，然后提交后写入数据库中的表格中。需要对提交的信息进行修改，信息填入不能为空，为空则则有提示。
jsp结合SQLSERVER向数据库中的表添加图书信息. 已知数据库中存在表tb_book2,通过在图书信息界面填写书本的基本信息,然后提交后写入数据库中的表格中.需要对提交的信息进行修改,信息填入不 ...
批量识别图片文字并存为Excel，几行Python轻松实现！
今天给大家分享批量识别图片的方法. 一.背景也许你还记得,前不久复旦大学一博士生写了130行Python代码,批量识别核酸截图内容的故事.当时还被人民日报公众号报道出来,夸赞用所学贡献青春力量! 其 ...
linux命令行颜色,技术|在 Linux 命令行中自定义文本颜色
在 Linux 命令行当中使用不同颜色以期提供一种根据文件类型来识别文件的简单方式.你可以修改这些颜色,但是在做之前应该对你做的事情有充分的理由. 如果你在 Linux 命令行上花费了大量的时间(如果 ...

elemtnui 表格如何修改某行文字颜色（elemtnui table 修改某行文字颜色）

elemtnui 表格如何修改某行文字颜色（elemtnui table 修改某行文字颜色）相关推荐

最新文章

热门文章