el-table 点击行变色可以通过多种方法实现,以下是一些常见的方法及其实现步骤: 方法一:使用 highlight-current-row 属性 Element UI 提供了 highlight-current-row 属性,该属性用于在点击某一行时自动高亮显示该行。 在el-table 组件中添加 highlight-current-row 属性: html <el-table :data="tableData" ...
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"> ...
::v-deep .el-table__body tr:hover > td { background-color: rgba(255,255,255,.1) !important; }
<el-table-column prop="length" label="长度(km)" ></el-table-column> </el-table> methods方法: tableRowClassName({ rowIndex }) { if ((rowIndex + 1) % 2 === 0) { return 'oddRow'; } return 'evenRow'; }, style样式 .oddRow { ...
<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.') { ...
// 移出单元格 恢复默认色 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....
el-table鼠标悬浮的变色样式重置,看似是个简单的css的问题,实则不然,下面来讲一下处理方式 1. 简单的css处理(最普通的情况) .el-table__body tr:hover>td{background:rgba(0,0,0,1);} 一般情况下这个方法可以解决问题,如果不想影响所有表格给el-table一个class名 ...
一般来说都是自己在 el-table-column 上绑定 style 来写行内样式,具体的颜色就可以自己写一个函数来返回,就可以高度的自定义颜色和区间范围。也可以通过 cell-class-name 属性来处理,但是这样的话,就没有办法修改颜色值的。只能修改判断的区间范围。 有用 回复 查看全部 1 个回答 ...
::v-deep .el-table::before { //去除底部白线 left: 0; bottom: 0; width: 100%; height: 0px; } 1. 2. 3. 4. 5. 6. 7. 改变hover颜色 ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{ ...