今天在做后台管理系统时，遇到一个需求，就是根据表格中每行数据的状态，来渲染背景颜色。
如下图所示：满足一定条件时，背景颜色要改为绿色。

`row-style`的使用

1.在`el-table`上添加`row-style`，指定一个函数

<el-table ref="multipleTable" :data="tableData" border :row-style="tableRowStyle">
....
</el-table>

2.函数参数为`{row,rowIndex}`，根据`row`判断关键字段

tableRowStyle({ row }) {if (row.status == 40) {return { 'background-color': '#67c23a','color':'#fff' }}
}

我这边判断的条件就是：如果status==40，则背景颜色改为#67c23a，字体颜色改为#fff。

完成！！！

在鼠标划过行时，会有个灰色的默认色，因为已经有了背景颜色，如果划过变成灰色会比较难看，因此可以通过下面的方式去掉划过的背景色：

3.去掉`hover`时的背景色

.el-table--enable-row-hover .el-table__body tr:hover > td {background: transparent;
}

效果完成！！！

`header-cell-style参数的使用`

v-bind:header-cell-style="{'font-size':'14px','text-align':'left'}"
表示：给表头设置字号，居中方式等。

elementUi——table组件修改表头和表身行样式——style的使用相关推荐

html 表格高度调整,elementui中el-table修改表头高度和行高度（设置最低高度）
问题描述 elementui提供的el-table其实挺不错,不过有时候可能还需要对其进行样式的修改.官方也提供了相应的表格属性,方便我们去修改对应的样式,但是有的时候可能会少了点什么. 比如:想要把 ...
ElementUI table组件，表格组件，单击单元格可编辑逻辑
ElementUI table组件,表格组件,单击单元格可编辑逻辑 1.表格部分 <el-table:data="seatDataFilter"@cell-click=&qu ...
elementui table组件和popover实现表格列内容过长，显示隐藏多余字段，hover显示所有内容；无内容或则内容少则不显示popover
elementui table组件和popover实现表格列内容过长,显示隐藏多余字段,hover显示所有内容:无内容或则内容少则不显示popover 1.场景效果 2.实现 3.进阶版 1.场景效果 ...
antd 设置表头属性_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
一.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...
antd table动态表头_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
1.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本以前都存在,反正3.16.2版本是存在这个问题的,若是是3.24.0以前的版本估计只能经过修改css样式解决.css 按照官网说的 ...
react antd 更改table 表头和表行样式
我这里以组件的形式来提供code 使实例正确运行至少需要以下知识: 1 创建react项目(本实例基于react项目) 2 知道如何导入和调用组件样式效果如下图: 实现方法目录结构: YMColl ...
vue 手风琴组件_Vue 使用Element-ui table组件实现手风琴效果
利用Element-UI提供的表格组件做成手风琴效果, 即同时只能有一个行展开效果展示手风琴效果版本说明 "vue": "^2.6.11", " ...
element-ui table组件如何高度自适应、el-table的x、y轴都出现滚动条右下角会出现一个小白块解决方案
前言想要表格的高度自适应屏幕,保证table能一屏内展示完. elementUI的版本: "element-ui": "^2.14.1", 关键代码: < ...
iview的表格自定义_iview table组件自定义表头
在实际项目开发中,我们经常会用到各种各样的表格,比如在表格表头中填加按钮,下拉菜单,图标等等,在网上搜了一段时间发现比较少,所以写好之后就想着分享出来给有需要的人参考参考,例如下面这种表头带图标的: ...

elementUi——table组件修改表头和表身行样式——style的使用

`row-style`的使用

1.在`el-table`上添加`row-style`，指定一个函数

2.函数参数为`{row,rowIndex}`，根据`row`判断关键字段

3.去掉`hover`时的背景色

`header-cell-style参数的使用`

elementUi——table组件修改表头和表身行样式——style的使用相关推荐

最新文章

热门文章

elementUi——table组件修改表头和表身行样式——style的使用

row-style的使用

1.在el-table上添加row-style，指定一个函数

2.函数参数为{row,rowIndex}，根据row判断关键字段

3.去掉hover时的背景色

header-cell-style参数的使用

elementUi——table组件修改表头和表身行样式——style的使用相关推荐

最新文章

热门文章

`row-style`的使用

1.在`el-table`上添加`row-style`，指定一个函数

2.函数参数为`{row,rowIndex}`，根据`row`判断关键字段

3.去掉`hover`时的背景色

`header-cell-style参数的使用`