::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { background-color: #409eff; } ::v-deep .el-table__body tr.current-row > td.el-table__cell { background-color: #409eff; }
-- highlight-current-row 为选中高亮当前点击的行 --><el-table:data="tableData"highlight-current-rowstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="...
今天写代码时用到了el-table组件,现将常用的attributes属性进行总结,方便以后使用。主要包括行高、行背景色、某列背景色及cell中的样式设置。用到的属性有:highlight-current-row(是否要高亮当前行)、header-cell-style(表头单元格的style 的回调方法)、header-row-style(表头行的 style 的回调方法)、cell-style(单...
当然,使用 header-cell-style 和 row-style 也是可以的 鼠标hover每行的样式: .el-table .el-table__body tr.current-row > td { background-color: #0D1F34 !important; } .el-table .el-table__body tr:hover > td { background-color: #0D1F34 !important; } 修改表格每行边框的样式: .el...
所以,就在页面上重写样式,即可: /* 鼠标移入*/ .el-table--enable-row-hover .el-table__body tr:hover>td { background-color: #f19944; color: #fff; } /* 鼠标选中*/ .el-table__body tr.current-row>td { background-color: #f19944 !important; ...
在使用el-table组件时,我们通常会允许用户通过点击表格中的行来选中数据。setcurrentrow方法可以用来设置当前被选中的行,从而实现一些和选中行相关的操作,比如编辑、删除等。 三、如何使用setcurrentrow方法 在实际开发中,我们可以通过以下步骤来使用setcurrentrow方法: 1. 我们需要在代码中引入el-table组件,并在data中...
1、highlight-current-row tr.current-row > td, .el-table__body tr:hover > td { background: #f5f5f5; } 1. 2. 3. 4. 2、:row-class-name=“tableRowClassName”,需要借助@row-click="handleRowClick"获取当前点击行的下标 data() { ...
一、清除el-table 排序高亮状态 需求背景:排序后,切换日期或其他条件重新渲染表格数据,这时候需要去除排序箭头高亮样式。 <el-table ref="table"highlight-current-row style="width: 100%;"><el-table-column sortable ref="applyTimeRef"prop="applyTime"label="申请时间"></el-table-column></el-table>cre...
el-table组件中实现选中行变色,可以通过多种方法来完成。以下是一些常见的方法及其实现步骤: 方法一:使用highlight-current-row属性 设置highlight-current-row属性: 在el-table组件中添加highlight-current-row属性,并设置为true。这样,当你点击某一行时,该行将自动高亮显示。
2、然后打开控制台,看加上属性之后,是哪个样式改了: 所以,就在页面上重写样式,即可: /*鼠标移入*/.el-table--enable-row-hover .el-table__body tr:hover>td{background-color:#f19944;color:#fff; }/*鼠标选中*/.el-table__body tr.current-row>td{background-color:#f19944 !important;color:#fff...