方法一:使用highlight-current-row属性 设置highlight-current-row属性: 在el-table组件中添加highlight-current-row属性,并设置为true。这样,当你点击某一行时,该行将自动高亮显示。html <el-table :data="tableData" highlight-current-row> <!-- 表格列定义 --> </el-table> ...
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() { return { tableRowIndex: 0 } } 1. 2. 3. 4. 5. ...
::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; }
一、清除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...
highlight-current-row style="width: 100%" ref="tb" > // 多选变单选 handleSelectionChange(val) { if (val.length > 1) { this.$refs.tb.clearSelection(); this.$refs.tb.toggleRowSelection(val.pop()); } // 单选后的信息 radioHandle(selection, row) { ...
<template><divclass="app-container haplotype-detail default-scrollbar"><el-formref="historyForm":model="historyForm"size="small"><divclass="table-box"@contextmenu.prevent.capturestyle="display: flex"><el-tablehighlight-current-row:header-cell-style="{ background: '#FAFAFA' }":data="history...
:highlight-current-row="true"//高光选中行 :current-row-key="NowRowIndex"//行号 :row-class-name="tableRowClassName"//装载 EL-TABLE前执行的 方法 会遍历每一行 每一个单元格 @row-click="BaseRowClick">//添加行点击事件 二:添加 分页 组件 细节在于 :current-page.sync="currentPage" 不写这句...
修改样式的时候,发现没出现自己想要的效果,用div重新布局以后,发现效果是出现了,但el-table滚动条不见了。 解决: <div style="padding:2px;height:600px"> <el-table v-loading="loading":data="list"highlight-current-row style="width: 100%;"height="100%">...</el-table> ...
:data="tableData" highlight-current-row @row-click="handleCurrentChange" > 三个注意点: ref="singleTableRef" ——> 用于调用 table 组件的方法 setCurrentRow(setCurrentRow 用于单选表格,设定某一行为选中行)highlight-current-row ——> 用于高亮当前行@row-click="handleCurrentChange" ——> 当某一...
highlight-current-row :header-cell-style="handerMethod" @selection-change="handleSelectionChange" > <el-table-column prop="" label="功能" width="40px"> <template slot="header"> <i class="el-icon-circle-close" style=" color: red;font-weight: bolder;font-size: 18px; ...