Vue里的ElementUi点击行如何获取 Table 的行索引

文档中有一个:row-class-name="tableRowClassName"属性，可以获取到当前行的index, 看下面代码，注意 :row-class-name是写在el-table标签上的，不要写错了位置哦！

<template><el-table:data="tableData2"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column></el-table>
</template><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}
</style><script>export default {methods: {tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}},data() {return {tableData2: [{date: '2016-05-02',name: '王小虎'}, {date: '2016-05-04',name: '王小虎'}]}}}
</script>

只要将方法，构造成这样：把每一行的索引放进row

tableRowClassName ({row, rowIndex}) {// 把每一行的索引放进rowrow.index = rowIndex;
}

构造row的index，后续用到时只需要row.index获取索引，从0开始

Vue里的ElementUi点击行如何获取 Table 的行索引相关推荐

WPF DataGrid通过点击单元格获取所在的行号
WPF DataGrid通过点击单元格获取所在的行号 private void DataGridCell_MouseDoubleClick(object sender, MouseButtonEven ...
excel vba区域求和获取筛选后数据行号获取筛选后行号总数
获取筛选后行号总数 Sub get_total_filer_count()Dim rngCell As RangeDim lngRowCnt As LongFor Each rngCell In [a ...
解决vue里iscroll（better-scroll）点击触发两次和初始化无法滚动问题！
这两个插件我用过好几次,有时候很顺利,不顺利的时候真的很麻烦,一直无法滚动,明明style里已经有样式了,就是滚动不了. 先说下在vue里的三种的引入方式: 在index.html文件里通过scrip ...
Vue项目代码改进（四）—— 在使用ElementUI时点击同一个路由，页面报错
这个不可描述的问题是:在使用ElementUI时点击同一个路由,页面报错. 错误代码如下: element-ui.common.js?ccbf:3339 NavigationDuplicated {_ ...
elementui 搭建布局页面路由_【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局...
前言大家都知道,后台管理界面不需要很酷炫的动画效果,也不需要花里胡哨的界面布局,只需要简洁易用.清爽明了的界面以便于管理数据.而现在普遍的后台管理系统的界面布局都差不多,上中下结构,然后左边是导航栏 ...
【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局
前言大家都知道,后台管理界面不需要很酷炫的动画效果,也不需要花里胡哨的界面布局,只需要简洁易用.清爽明了的界面以便于管理数据.而现在普遍的后台管理系统的界面布局都差不多,上中下结构,然后左边是导航栏 ...
vue项目中element-ui的分页器(组件封装）
vue项目中element-ui的分页器组件 <template><el-col :span="24" class="toolbar" sty ...
Vue.js(十) element-ui PC端组件库
一:简介饿了么公司基于Vue开发了两套UI组件库,PC端组件库和移动端组件库. 一部分组件库是对原生的HTML标签元素的封装,增加了一些新的功能. 另一部分组件库是原生HTML标签元素没有的,是 ...
Vue 里，多级菜单要如何设计才显得专业？
老生常谈了! 虽然我们是 Java 猿,但是写起来前端代码也不含糊!今天我想来和大家聊聊这个前端的动态菜单,要如何设计才显得专业!还是以我们的 TienChin 项目为例,大家一起来看看. 先来一张截 ...

Vue里的ElementUi点击行如何获取 Table 的行索引

Vue里的ElementUi点击行如何获取 Table 的行索引相关推荐

最新文章

热门文章

Vue里的ElementUi点击行 如何获取 Table 的行索引

Vue里的ElementUi点击行 如何获取 Table 的行索引相关推荐

最新文章

热门文章

Vue里的ElementUi点击行如何获取 Table 的行索引

Vue里的ElementUi点击行如何获取 Table 的行索引相关推荐