elementUI Table组件点击取当前行索引

最新推荐文章于 2024-09-03 21:59:09 发布

天天打码

最新推荐文章于 2024-09-03 21:59:09 发布

阅读量1.5k

点赞数 4

分类专栏： VUE 文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/tianlu930/article/details/136471661

版权

VUE 专栏收录该内容

14 篇文章 6 订阅

订阅专栏

本文介绍了如何在ElementUI的Table组件中，利用`scope.$index`获取当前行索引并实现点击删除功能，通过`splice`方法从data数组中移除指定行。

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

在使用element UI Table组件时，需要点击取当前行索引，并删除当前行，看了element UI 文档好象没有这个的，仔细看下发现当前行索引是在scope里的$.index里。
element UI文档：https://www.uihtm.com/element/#/zh-CN/component/table
代码:

<el-table :data="tableData">
<el-table-column prop="HDBUReportSubCode" label="Product Name" width="180" fixed="left">
            <template slot-scope="scope">
             {{scope.row.name}} <i class="el-icon-delete" @click="delRow(scope.$index)"></i>
            </template>
            </el-table-column>
</el-table>


....
//这样就可以删除行数据
delRow(index)
        {
            this.tableData.splice(index,1);
        },
....