组件中,设置选中行的颜色可以通过多种方法实现。以下是几种常见的方法,以及对应的代码示例: 方法一:使用 highlight-current-row 属性 Element UI 提供了一个 highlight-current-row 属性,当设置该属性时,表格会自动为当前选中的行添加 current-row 类。你可以通过自定义 CSS 来改变选中行的颜色。
默认样式 深色主题 border ref="singleTable" 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); }...
ref="singleTable":data="tableData"highlight-current-row @current-change="handleCurrentChange":header-cell-style="{background:'#ECF0FB'}":row-class-name="tableRowClassName"style="width: 100%"> <el-table-column type="index" width="50"></el-table-column> <el-table-column prop="nickname...
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...
::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属性,才会有选中的效果 ...
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="...
/* 选中行颜色,需要开启 highlight-current-row */ .el-table__body tr.current-row > td.el-table__cell { background-color: #202a33; } /* 当前行 鼠标悬浮 */ .el-table__body tr.hover-row > td.el-table__cell { background: #062b6a; ...
highlight-current-row属性用于设置是否需要高亮当前行,默认情况下是开启的。我们需要将其设置为false,以禁用默认的鼠标移入变色效果。 在CSS样式中,我们可以利用伪类选择器:hover来为鼠标悬停状态的列设置样式,以使其颜色保持不变。例如,我们可以这样设置: css .el-table__body-wrapper .el-table__body tbody tr...
el-table 加上 highlight-current-row 属性。 <el-table ref='tTable' :data="dataList" highlight-current-row></el-table> 调用setCurrentRow(row, true) 设置当前行高亮,row为dataList里面的数据。 selectRow(row) { if (row) { this.$refs.tTable.setCurrentRow(row, true); ...
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-...