前端：elementUI Table获取单击的是第几行和第几列

最新推荐文章于 2024-11-07 08:26:33 发布

原创最新推荐文章于 2024-11-07 08:26:33 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #elementui #vue.js

文章介绍了如何在Vue项目中，通过el-table组件的cell-class-name属性自定义单元格样式，并结合cell-click事件监听单元格点击，实现行和列索引的赋值及打印。这展示了在前端开发中对表格交互功能的实现。


<!--html-->
<el-table :cell-class-name="tableCellClassName" @cell-click="cellClick">
</el-table>


//js
methods:{
    tableCellClassName({row, column, rowIndex, columnIndex}){
      //注意这里是解构
      //利用单元格的 className 的回调方法，给行列索引赋值
      row.index=rowIndex;
      column.index=columnIndex;
    },
    cellClick(row, column, cell, event){
      console.log(row.index);
      console.log(column.index);
    }