ElementUI 中 el-table 获取当前选中行的index

最新推荐文章于 2024-07-19 16:40:46 发布

转载最新推荐文章于 2024-07-19 16:40:46 发布 · 2.5w 阅读

24 ·

CC 4.0 BY-SA版权

原文链接：https://www.bbsmax.com/A/QV5ZgOBZdy/

前端专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何在 Element UI 的 el-table 组件中通过自定义 row-class-name 函数将行索引附加到数据行，并在点击行时获取该索引。同时，解决使用 select 事件时选择行对象返回 undefined 的问题。

第一种方法：将index放到row数据中

首先，给table加一个属性：:row-class-name="tableRowClassName"

然后定义tableRowClassName函数：(tableRowClassName可以自己改名)

tableRowClassName({row, rowIndex}) {
row.row_index = rowIndex;
}

然后给表格添加： @row-click = "onRowClick"

onRowClick (row, event, column) {
this.currentRowIndex = row.row_index;
}

这时，属性：currentRowIndex存的就是当前选中行的index了

el table表格中用了select怎么获取，选择行对象

element-ui

el table表格中用了select怎么获取，选择行对象,为什么我下面会undefined

事件名说明参数
select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, row

 <el-table ref="singleTable" @select='selectCall()' :data="tableData" highlight-current-row   style="width: 97%">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column property="code" label="属性编码" width="120" > </el-table-column>
    <el-table-column property="name" label="属性名称" width="120"> </el-table-column>
    <el-table-column property="unit" label="数量"></el-table-column>
    <el-table-column property="unit" label="单位"></el-table-column>
</el-table>


selectCall(row){
  console.log(row);//undefined
}