el-table 点击行变色可以通过多种方法实现,以下是一些常见的方法及其实现步骤: 方法一:使用 highlight-current-row 属性 Element UI 提供了 highlight-current-row 属性,该属性用于在点击某一行时自动高亮显示该行。 在el-table 组件中添加 highlight-current-row 属性: html <el-table :data="tableData" ...
1、设置行变色 <el-table :data="dataList":row-class-name="tableRowClassName":cell-style="tableCellstyle"> methods中写方法: tableRowClassName(row, rowIndex ) {if(row.row.name == 'test') {return'rowColor'}return''}, style中设置class属性: ::v-deep .el-table .rowColor{background:#f3...
<el-table-column type="index" label="序号" width="80"> </el-table-column> <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 :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="l...
<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.') { ...
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{ background: #212936; /*隔行变色*/ } 1. 2. 3. table组件设置背景颜色透明 ::v-deep .el-table--fit{ padding: 20px; } ::v-deep .el-table, .el-table__expanded-cell { ...
1. 间隔行变色 参考链接:https://blog.csdn.net/weixin_43551840/article/details/89100478 给el-table添加属性stripe,斑马纹,即间隔行变色 样式如下: 2. 显示网格线 给el-table添加属性border 样式如下 3. 每一行添加索引 上面代码中有,索引列,label里面的内容可以自行填写,type设置为index就行 ...
一般来说都是自己在 el-table-column 上绑定 style 来写行内样式,具体的颜色就可以自己写一个函数来返回,就可以高度的自定义颜色和区间范围。也可以通过 cell-class-name 属性来处理,但是这样的话,就没有办法修改颜色值的。只能修改判断的区间范围。 有用 回复 查看全部 1 个回答 ...
// html<el-table:row-class-name="tableRowClassName"></el-table>// jsmethods:{tableRowClassName({row,rowIndex}){if(row.deployStatus==0){return"warning-row"}else{return'';}}} 右侧固定了一个列,就出现了很奇怪的bug,鼠标放置在左侧第3行,右侧固定行第2行单元格变色了,查看了一下css中一个ho...