一个用来控制头部颜色,rowIndex的下标为0表示的就是第一个,这样就可以给第一个设置颜色了。 也就是: element-ui如何自定义表格颜色-核心代码: //控制行颜色 tableRowClassName ({ row, rowIndex }) { if ((rowIndex + 1) % 2 === 0) { return 'double'; //对应的类 } else { return 'single';...
总结 我们将鼠标移入时高亮色会将我们设置的背景色覆盖,这是官网中为了让鼠标移入表格更生动形象,有层次感,所以我们只需要将鼠标移入该行的高亮色设为透明色,显示出我们设置的背景色即可。
ElementUI的el-table表格使用cell-style根据表格不同数据显示不同颜色 1.在表格中添加属性 在el-table标签中添加 :cell-style="cellStayle" <el-table:data="tableData"stripeclass=""style="width: 100%":cell-style="cellStayle"><el-table-columntype="index"width="50"label="序号"></el-table-column>...
简介:vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题 今天写了一些代码,是有关合同审核成功之后,整条数据显示绿色,针对已经作废的数据整条显示红色。以下是解决方案。 1 在表格头添加。:cell-style="tableRowClassName" <el-table :cell-style="tableRowClassName"></<el-table> ...
//表格文字颜色 .audit__table-container .el-table tr td{ color:#909399; } //表格单元格右边框 .audit__table-container .el-table tr td:not(:last-child) { border-right:1pxsolid#eee; } //去掉底部的白线 .common-table-container .el-table::before { ...
假设有这样一个需求,就是我们有数据表格,用来记录学生是否处于上学和辍学的状态。辍学的状态加上个背景色,作为提醒。最终效果如下图 代码附上 <template><el-table:data="tableData"border:header-cell-style="{background: '#fafafa',color: '#333',fontWeight: '600',fontSize: '14px',}"style="width: ...
<template> <!-- 需求:三国人物表格,要求不同的国别展示不同的颜色(魏国红色、蜀国黑色、吴国蓝色) --> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="nation" label="国别" width...
css 的 ::v-deep 最后,如果是嵌套表格,那就是挨着的都要写上 <el-table:data="tableData"style="width:100%":cell-class-name="tableCellClassName":header-cell-class-name="tableCellClassName"></el-table> tableCellClassName({column}){if(column.label=="总数量"||column.label=="法人/个体"||col...
// 设置表格第一行的颜色getRowClass({row,column,rowIndex,columnIndex}){if(rowIndex===0){return'background:#2A3253'}else{return''}}, https://blog.csdn.net/Feast_aw/article/details/80777577 表格默认hover背景颜色 .el-table__body tr:hover>td{background:#1b223e!important;} ...