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>