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....
highlight-current-row @row-click="changeHighlight" > </el-table> 如上图所示的表格,为了开启斑马纹效果,需要加这样一句: highlight-current-row 就可以开启点击高亮的效果。 为了修改高亮的具体样式,还是需要用到css的深度作用选择器。 /deep/.el-table__body tr.current-row > td { background-color: ...
首先需要用到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; } 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('再次点击同一行,取消当前行选中'); // 取消当前行选中,湾空保...
第一步:开启表格的高亮显示配置属性。highlight-current-row 第二步:全局引入css /* 用来设置当前页面element全局table 选中某行时的背景色*/ .container .el-table__body tr.current-row>td{ background-color: #F5F7FA !important; /* color: #f19944; */ /* 设置文字颜色,可以选择不设置 */ ...
1 <el-table :data="tableData" border size="mini" fit highlight-current-row height="500" :row-style="rowStyle" @row-dblclick="rowDblclick" 2 v-loading="loading" 3 element-loading-text="拼命加载中" 4 element-loading-spinner="el-icon-loading" ...
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标签里...