el-table 组件中,设置选中行的颜色可以通过多种方法实现。以下是几种常见的方法,以及对应的代码示例: 方法一:使用 highlight-current-row 属性 Element UI 提供了一个 highlight-current-row 属性,当设置该属性时,表格会自动为当前选中的行添加 current-row 类。你可以通过自定义 CSS 来改变选中行的颜色。
;/**行悬浮颜色 */--el-table-current-row-bg-color:rgb(0,161,48);/**当前行颜色 */--el-table-header-bg-color:rgba(255,0,0,0);/**表头背景颜色, 透明度为0 */--el-table-fixed-box-shadow:var(--el-box-shadow-light);--el-table-bg-color:rgba(255,0,0,0);/**表格背景颜色, 透...
highlight-current-row @current-change="handleCurrentChange" :row-class-name="tableRowClassName" :header-cell-style="{background:'#004d8c',color:'#FFFFFF'}" 1. 2. 3. 4. 5. 6. 事件方法 (row) { this.$refs.singleTable.setCurrentRow(row); }, handleCurrentChange(val) { this.currentR...
//奇偶行背景色不同setCurrent(row) { this.$refs.singleTable.setCurrentRow(row); },handleCurrentChange(val) { this.currentRow =val; },tableRowClassName({row, rowIndex}) { if ((rowIndex+1) % 2 === 0) { return 'success-row'; } return ''; }, } } .el-table .success-row{ bac...
highlight-current-row:是否高亮当前行,默认值为false,设置为true后表格会高亮当前行。 row-class-name:行的类名,可以是字符串或函数类型,可以根据行数据返回不同的类名,例如: <el-table:data="tableData":row-class-name="rowClassName"><el-table-columnprop="name"label="Name"></el-table-column><el-...
highlight-current-row header-cell-style="background-color:#5768cc;color:white;" :row-style="changeRowBgColor" > <el-table-column prop="username" label="用户名" align="center" width="100px"></el-table-column> <el-table-column prop="addtime" label="添加日期" align="center" width="300...
highlight-current-row header-cell-style="background-color:#5768cc;color:white;":row-style="changeRowBgColor"> <el-table-column prop="username" label="⽤户名" align="center" width="100px"></el-table-column> <el-table-column prop="addtime" label="添加⽇期" align="center" width="...
<el-tableref="dataGrid"highlight-selection-row:header-cell-style="{color:'#000',backgroundColor:'#DCE6F0'}":data="datalist"@selection-change="handleCurrent"@select-all="selectAll"@row-dblclick="rowDblclick"><el-table-columnfixed="left"type="selection"align="center"width="48"></el-table...
el-table 高亮某一行 使用highlight-current-row 属性 el-table 加上 highlight-current-row 属性。 <el-table ref='tTable' :data="dataList" highlight-current-row></el-table> 调用setCurrentRow(row, true) 设置当前行高亮,row为dataList里面的数据。
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td{background-color:transparent !important;/*color: #f19944;*//*设置文字颜色,可以选择不设置*/} 6.设置选中某一行时的样式 注意:需要在<el-table />中添加highlight-current-row属性,才会有选中的效果 ...