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响应式原理与双向数据的深入解析
Vue 最独特的特性之一,是其非侵入性的响应式系统。下面这篇文章主要给大家介绍了关于vue响应式原理与双向数据的相关资料,需要的朋友可以参考下
2021-06-06
vue项目中使用AES实现密码加密解密（ECB和CBC两种模式）
这篇文章主要介绍了vue项目中使用AES实现密码加密解密的方法，主要是通过ecb和cbc两种模式，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
vue 中 beforeRouteEnter 死循环的问题
这篇文章主要介绍了vue beforeRouteEnter 死循环的问题,在文章末尾给大家补充介绍了vue中beforeRouteEnter使用的误区，需要的朋友可以参考下
2019-04-04
iview实现select tree树形下拉框的示例代码
这篇文章主要介绍了iview实现select tree树形下拉框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
vue router 传参获取不到的解决方式
今天小编就为大家分享一篇vue router 传参获取不到的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
基于Vue的SPA动态修改页面title的方法(推荐)
这篇文章主要介绍了基于Vue的SPA动态修改页面title的方法,需要的朋友可以参考下
2018-01-01
关于element ui中el-cascader的使用方式
这篇文章主要介绍了关于element ui中el-cascader的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue3 中的 shallowReactive 详解
本文深入探讨了Vue3中新特性shallowReactive的使用和原理,shallowReactive是创建浅响应式对象的API,只对对象的第一层属性进行响应式转换,不对嵌套对象处理,有助于性能优化和状态管理,同时也指出了shallowReactive在使用中的注意事项
2024-10-10
vue 使用el-table循环轮播数据列表的实现
这篇文章主要介绍了vue 使用el-table循环轮播数据列表的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
今天小编就为大家分享一篇vue2.0 使用element-ui里的upload组件实现图片预览效果方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09