tableRowClassName(row, rowIndex ) {if(row.row.name == 'test') {return'rowColor'}return''}, style中设置class属性: ::v-deep .el-table .rowColor{background:#f3c298; } 2、置好背景色后发现,每次鼠标移入到变色的行上面,背景色就会变成灰色,要求是移入后也应该是变过色的背景色 tableCellstyl...
<el-table-column type="selection" width="50"> </el-table-column> <el-table-column prop="date" label="日期" width="220"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="年龄" width="240"> ...
</el-table-column> </el-table> </div> methods:{ rowClassName(row,rowIndex,column,columnIndex){ if(rowIndex%2==0){ return '{backgroundColor:'red'}' }else{ return '{backgroundColor:'blue'}' } return:''; } } //以上是官方文档可以设置表格背景色变色,但是也会遇到要求一行的字体变色的...
<el-table :data="tableData" fit :row-class-name="tableRowClassName"> <el-table-column type="index" label="序号"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="length" label="长度(km)" ></el-table-column> </el-table> ...
el-table鼠标悬停变色 ::v-deep .el-table__body tr:hover > td { background-color: rgba(255,255,255,.1) !important; }
<el-table class="table" :data="userList.data" :border="true" :header-cell-style="grayColor" stripe > ... </template> <script> ... const grayColor = ({ column }: { column: any }) => { if (column.label === 'No.') { ...
el-table 树性表格隔行变色后,树展开合并后样式错乱 问题 用到的方法 原因和解决方法 修改方法 方法一、修改传入的acc.length 方法二、隐藏的行不添加到acc中 问题 展开合并后表格的样式,本来是隔行变色的,结果第一行展开合并后,第二行变成了第一行的颜色。我的问题只会在子行数为奇数的情况下发生,第一行只...
el-table鼠标悬浮的变色样式重置,看似是个简单的css的问题,实则不然,下面来讲一下处理方式 1. 简单的css处理(最普通的情况) .el-table__body tr:hover>td{background:rgba(0,0,0,1);} 一般情况下这个方法可以解决问题,如果不想影响所有表格给el-table一个class名 ...
在el-table中添加属性stripe,值为true,即可实现隔行变色。发布于 1 年前 本站已为你智能检索到如下内容,以供参考: 🐻 相关问答 3 个 1、Vue项目中使用element-ui的el-table组件以及修改表头的颜色和实现每行的不同状态(隔行变色) 2、Vue中在使用element设置表格隔行变色时,设置 :row-class-name 不起效果...
// 移出单元格 恢复默认色 cellMouseLeave(row, column, cell, event) { cell.classList.remove('blue-cell'); }, 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. ::v-deep .el-table td.blue-cell{ border: 1px solid blue !important; } 1. 2. 3....