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. ...
this.currentRow = val }, // 设置列样式 setCellStyle ({row, column, rowIndex, columnIndex}) { if (column.property === 'city') return 'color: #409EFF;cursor:pointer;' }, formatter (row, column) { if (row.zip === 200334) { console.log(row, column) // row.zip = 1 // 要ret...
1、highlight-current-row 设置css: tr.current-row > td, .el-table__body tr:hover > td{background:#f5f5f5; } 2、:row-class-name="tableRowClassName",需要借助@row-click="handleRowClick"获取当前点击行的下标 data中定义: data() {return{ tableRowIndex:0} } methods中定义tableRowClassName函...
@row-click="changeHighlight" > </el-table> 如上图所示的表格,为了开启斑马纹效果,需要加这样一句: highlight-current-row 就可以开启点击高亮的效果。 为了修改高亮的具体样式,还是需要用到css的深度作用选择器。 /deep/.el-table__body tr.current-row > td { background-color: rgb(251, 237, 187) ...
前言,在大家使用Element UI的表格的时候需要用到表格的highlight-current-row去让点击的行高亮,但再次点击高亮行却无法取消高亮。在这里,我研究出了一种方法可解决这个问题,方法如下: 首先需要用到el-table的@row-click事件 image.png 代码如下: <el-tableref="table":data="tableData"row-key="id"highlight-...
highlight-current-row :header-cell-style="handerMethod" @selection-change="handleSelectionChange" > 在这里,先是根据feederMap里的不同馈线值(feederUri)来设置ref。 此外,在根据this.$refs的内容,确定每一个ref指代的table的内容。 在changeHighlight这里, ...
需求背景:排序后,切换日期或其他条件重新渲染表格数据,这时候需要去除排序箭头高亮样式。 <el-table ref="table"highlight-current-row style="width: 100%;"><el-table-column sortable ref="applyTimeRef"prop="applyTime"label="申请时间"></el-table-column></el-table>created(){this.clearSortHighlight...
1.1 首先通过el-row、el-col、el-card等将两个页面组合在一起。 1.2 其次在首页el-table 栏内设置 @row-click="companyClick"点击事件,并且设置点击时高亮,highlight-current-row 1.3 第2页面其实跟第1页面都差不多,但是要注意像表格数据映射名字要换一个名字ref="table" :data="companyTableData",及分页也...
<el-tableref="dxgrid":data="currentPageData"highlight-current-row@current-change="lineClick":row-style="setColor"height="100%"style="width: 100%; cursor:pointer;"><el-table-columnprop="MC"label="名称"show-overflow-tooltipwidth="520"></el-table-column></el-table> 注意: el-table标签里...
-- vue页面中table表头设置--><el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中..." border style="width: 100%;margin-bottom: 20px;" row-key="id" highlight-current-row :show-header="showHeader" lazy :load="load" :tree-...