elementui中tabel组件的scope.$index的使用及说明

更新时间：2022年10月20日 09:53:34 作者：小智玩前端

这篇文章主要介绍了elementui中tabel组件的scope.$index的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

elementui tabel组件scope.$index的使用

tabel组件的自定义列模板中可以使用scope.row获取当前行的数据，而scope.$index获取的是当前行的数据在数组中的索引（tabel表格绑定的数据是一个数组，数组中每一个对象就相当于一行的数据）

使用如下：

<el-table-column prop="age" label="年龄">
  <template slot-scope="scope">
    <span @click="editor(scope.row,scope.$index)">编辑</span>
  </template>
</el-table-column>

element获取单行的下标（scope.$index）

scope.$index

 <el-table-column
   fixed="right"
   label="操作"
   width="100">
   <template slot-scope="scope">
     <el-button class="del" @click.stop="contractInvoiceDataDel(scope.$index)" type="text" size="small">删除</el-button>
   </template>
 </el-table-column>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue父子组件通信全面详细介绍
这篇文章主要介绍了React中父子组件通信详解，在父组件中，为子组件添加属性数据，即可实现父组件向子组件通信，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-10-10
vue使用mixins优化组件
这篇文章主要介绍了vue如何使用mixins优化组件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-04-04
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
本篇文章主要介绍了利用 Vue.js 实现前后端分离的RBAC角色权限管理，非常具有实用价值，需要的朋友可以参考下
2017-09-09
浅谈一下Vue生命周期中mounted和created的区别
每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期,在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,那么这些过程中，具体vue做了些啥，我们今天来了解一下
2023-05-05
vue实现路由懒加载及组件懒加载的方式
懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载及组件懒加载 ,需要的朋友可以参考下
2019-06-06
vue生命周期beforeDestroy和destroyed调用方式
这篇文章主要介绍了vue生命周期beforeDestroy和destroyed调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
el-form组件使用resetFields重置失效的问题解决
用el-form写了包含三个字段的表单,使用resetFields方法进行重置,发现点击重置或要清空校验时是失效的,所以本文给大家介绍了el-form组件使用resetFields重置失效的问题解决,需要的朋友可以参考下
2023-12-12
基于el-table封装的可拖拽行列、选择列组件的实现
本文主要介绍了基于el-table封装的可拖拽行列、选择列组件的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12
使用vue-print-nb打印el-table问题总结
这篇文章主要介绍了使用vue-print-nb打印el-table问题总结,通过实例代码介绍了vue-print-nb 打印功能,本文结合实例代码讲解的非常详细,感兴趣的朋友一起看看吧
2024-01-01
解决antd datepicker 获取时间默认少8个小时的问题
这篇文章主要介绍了解决antd datepicker 获取时间默认少8个小时的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10