elementUI 获取table行的索引号

最新推荐文章于 2024-11-28 15:29:06 发布

xie_candy

最新推荐文章于 2024-11-28 15:29:06 发布

阅读量3.9k

点赞数 5

分类专栏： vue / elementUI 文章标签： vue elementui

本文链接：https://blog.csdn.net/xie_candy/article/details/112694652

版权

vue / elementUI 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍如何在Vue的el-table组件中添加`row-class-name`和`@row-click`属性，实现获取行索引并在行被点击时进行处理。通过rowClassName方法设置行的自定义样式，并在handleRowClickRole方法中记录并打印所点击行的索引。

摘要由CSDN通过智能技术生成

在<el-table> 组件中添加属性

:row-class-name="rowClassName" 和 @row-click='handleRowClickRole'

在方法里定义

//获取当前的行数
rowClassName({row, rowIndex}) {
//把每一行的索引放进row
row.index = rowIndex;
// console.log(row)
},
handleRowClickRole(row){
this.rowIndex = row.index
console.log(this.rowIndex)
}

完整如下

 <el-table
          ref="multipleTable"
          :data="tableData"
          :row-class-name="rowClassName"
          @row-click='handleRowClickRole'
          tooltip-effect="dark"
          fit
          size="medium"
          style="width: 100%"
          :header-cell-style="{background:'#fafafa'}" >

          <el-table-column
            prop="bigId"
            label="序号"
            width="150">

          </el-table-column>
</el-table>

<script>
export default {
      data() {
        return {
          tableData: [],
        }
      },
      methods: {
    
        //获取当前的行数
        rowClassName({row, rowIndex}) {
          //把每一行的索引放进row
          row.index = rowIndex;
          // console.log(row)
        },
        handleRowClickRole(row){
            this.rowIndex = row.index
            console.log(this.rowIndex)
        }
      }
}
</script>