美文网首页
el-table的行点击row-click事件获取行索引

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

作者: coderfl | 来源:发表于2023-10-17 14:27 被阅读0次

    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>
    

    相关文章

      网友评论

          本文标题:el-table的行点击row-click事件获取行索引

          本文链接:https://www.haomeiwen.com/subject/xdxqidtx.html