首先需要用到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(这个...
现有一个需求,表格单选带radio的效果,目前UI库还不支持。只能自行实现:贴下效果图: 用到vue3 + element plus: 关键代码: <!-- 表格 --> <el-table ref="refsTable" @row-click="clickRow" :data="tableData" height="260px" highlight-current-row> <el-table-column type="selection" width="40">...
@row-click="changeHighlight" > </el-table> 如上图所示的表格,为了开启斑马纹效果,需要加这样一句: highlight-current-row 就可以开启点击高亮的效果。 为了修改高亮的具体样式,还是需要用到css的深度作用选择器。 /deep/.el-table__body tr.current-row > td { background-color: rgb(251, 237, 187) ...
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....
<el-table :data="pageGoods" border current-row-key empty-text="暂无数据" fit highlight-current-row size="mini" style="width: 100%;"> <el-table-column align="left" label="商品类别" width column-key="goodClass" prop="goodClass" sortable :filters="headFilters['goodClass']" ...
- highlightCurrentRow:高亮显示当前选中的行。 - clearSelection:取消选中所有行数据,将选中的行数据数组置为空数组。 以上是element-plus table组件的一些常用方法,通过这些方法,我们可以实现对表格数据的获取、设置、清空、刷新等操作,以及对行、列、筛选状态的控制。通过合理地运用这些方法,可以满足不同场景下的需求...
.highlight { background-color: lightblue; } 至此,我们完成了使用element-plus的Table的setCurrentRow方法的步骤。 步骤四:setCurrentRow方法的注意事项 1. setCurrentRow方法只能将某一行设置为当前行,无法同时设置多行为当前行。 2. setCurrentRow方法只是设置当前行的样式,不会自动滚动到当前行位置。如需滚动到...
Element Plus Playground Steps to reproduce 设置el-table 的 highlight-current-row 和 row-key,并绑定 current-row-key 到变量 a,更新 a 后只有 UI 变化,但未触发 current-change 事件 What is Expected? 与setCurrentRow 方法一样,UI 变化且 触发 current-change 事件 ...
el-table 的主要属性:data,columns,stripe,border,height,row-key,highlight-current-row,size,等等 el-table-column 的主要属性:label,prop,width,align,sortable,render-header,scoped-slot 更多功能及具体用法详见官方文档Table表格 7. el-pagination 分页组件 el-pagination 是Element UI 中的分页组件,用于展示数据...
click="add" icon="plus">添加</el-button> <el-table v-bind:data="manifests" highlight-current-row border height="500"> <el-table-column prop="Date" label="日期"></el-table-column> <el-table-column prop="Cost" label="金额"></el-table-column> <el-table-column prop="Remark" ...