element-ui 点击行如何获取table的行索引

Posted yangyi9343

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element-ui 点击行如何获取table的行索引相关的知识,希望对你有一定的参考价值。

文档中有一个tableRowClassName方法,可以获取到当前行的index,
tableRowClassName ({row, rowIndex}) {
      //把每一行的索引放进row
      row.index = rowIndex;
    } 

例子:

表头:

1 <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading..."  border fit
2                   :row-class-name="tableRowClassName"
3                   @row-click = "onRowClick"
4                   highlight-current-row style="width: 100%">
5                 <el-table-column align="center" prop="passtime" label="Time" width="180">

js:

 1 tableRowClassName ({row, rowIndex}) {
 2       //把每一行的索引放进row
 3       row.index = rowIndex;
 4     },
 5     onRowClick (row, event, column) {
 6       //行点击消除new标记
 7       var index = row.index;
 8       var deleteIndex = Array.indexOf(this.showIndexArr, index);
 9       if (deleteIndex != -1) {
10         this.showIndexArr.splice(deleteIndex,1);  
11       }
12     }

以上。

参考:https://segmentfault.com/q/1010000007849369

以上是关于element-ui 点击行如何获取table的行索引的主要内容,如果未能解决你的问题,请参考以下文章

Element-ui 中table 默认选中 toggleRowSelection

Element-ui 中table 默认选中 toggleRowSelection

element-ui&table 多选的筛选功能 不用点击筛选按钮,勾选就能触发搜索值

Table展开行

element-ui中el-table的多选默认选中

element-UI table动态增加列,动态增加行,动态合并行。选择编辑表头行数据