@row-click="changeHighlight" > </el-table> 如上图所示的表格,为了开启斑马纹效果,需要加这样一句: highlight-current-row 就可以开启点击高亮的效果。 为了修改高亮的具体样式,还是需要用到css的深度作用选择器。 /deep/.el-table__body tr.current-row > td { background-color: rgb(251, 237, 187) ...
首先需要用到el-table的@row-click事件 image.png 代码如下: <el-tableref="table":data="tableData"row-key="id"highlight-current-rowstyle="width:100%;"@row-click="(row, column, event) => $rowClick(row,column, event, 'table')"></el-table> 我们这里需要用一个自定义的函数$rowClick(这个...
1、highlight-current-row 设置css: 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中定义: data() {return{ tableRowIndex:0} } 1. 2. 3....
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函...
在changeHighlight这里, /** * 实现点击进行高亮,再次点击取消高亮的操作 */ async changeHighlight(row, reftable) { var a = String(reftable); console.log(this.$refs[a][0]); if (this.currentRows[a] === row) { console.log('再次点击同一行,取消当前行选中'); // 取消当前行选中,湾空保...
1 <el-table :data="tableData" border size="mini" fit highlight-current-row height="500"> 2 <el-table-column type="index" align="center" fixed></el-table-column> 3 <el-table-column prop="DHM" min-width="140px" label="时间" align="center"></el-table-column> ...
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",及分页也...
elementUI表格属性:highlight-current-row(是否要高亮当前行) el-table 配置属性 highlight-current-row 后 点击行触发 row-click 事件,会给当前行添加一个current-row 样式属性 思路:在需要编辑操作的列中设置span(显示数据)及input(编辑数据)通过current-row样式属性配置的权重控制显隐达到只读/编辑的效果。
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中定义tableRow...
<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标签里...