el-table的行点击row-click事件获取行索引

2023-10-17  本文已影响0人  coderfl

1,el-table的行点击row-click事件获取行索引

<el-table :row-class-name="tableRowClassName" @row-click="rowClick"></el-table>

2,给每一行row的数据对象里添加index属性

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

3,监听行的点击事件

rowClick(row) {
    console.log(row);  // 当前点击的行数据
    console.log(row.index);   // 当前点击的行的索引值
}

4,row-click表格单行点击和单元格事件冲突解决/冒泡解决:
元素添加@click.stop 或 @click.native.stop

<el-table :row-class-name="tableRowClassName" @row-click="rowClick">
    <el-table-column>
        <el-input @click.native.stop v-model="input" placeholder="请输入内容"/>
    </el-table-column>
</el-table>
上一篇下一篇

猜你喜欢

热点阅读