element-ui table行点击获取行索引（index）并利用索引更换行顺序

1)将每一行的索引插入操作行中，即为每一行数据添加一个属性index
使用el-table已经给处的方法：tableRowClassName

html中：

<el-table :row-class-name="tableRowClassName"></el-table>

js中：只需放入methods中即可，el-table会自动触发(不知道为什么贴源码不行啊)

点击进行事件操作：

在el-table-column中加入slot,可以拿到当前点击列所属的行，并完成对其重新排列

js中：

到此这篇关于element-ui table行点击获取行索引（index）并利用索引更换行顺序的文章就介绍到这了,更多相关element-ui table行点击获取行索引内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue + better-scroll 实现移动端字母索引导航功能

    vue+ better-scroll 实现移动端歌手列表字母索引导航.算是一个学习笔记吧,写个笔记让自己了解的更加深入一点. Demo:list-view,使用 chrome 手机模式查看.换成手机模式之后,不能滑动的话,刷新一下就 OK 了. Github: 移动端字母索引导航 效果图 配置环境 因为用到的是 vue-cli 和 better-scroll,所以首先要安装 vue-cli,然后再 npm 安装better-scroll. 简单介绍一下 better-scroll: better

  • vue.js指令v-for使用以及下标索引的获取

    vue.js指令v-for使用以及下标索引的获取

    在 v-for 代码块中,我们可以完全地访问父级作用域下的属性. v-for 还支持可选的第二个参数,作为当前项的索引. 也可以使用 v-for 来遍历对象的属性. 还可以提供第二个参数,作为对象的键名(key): <body> <div id="box"> <ul> <li @click="onclick(index)" v-for="(item,index) in dataList">{{ite

  • vue.js指令v-for使用及索引获取

    vue.js指令v-for使用及索引获取

    1.v-for 直接上代码. 示例一: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <

  • vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】

    vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】

    本文实例讲述了vue v-for循环重复数据无法添加问题解决方法.分享给大家供大家参考,具体如下: 问题: 错误提示如下: 解决问题的代码示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue v-for循环重复数据无法添加问题</title> <style>

  • 在vue中,v-for的索引index在html中的使用方法

    如下所示: 以上这篇在vue中,v-for的索引index在html中的使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: vue.js指令v-for使用及索引获取 Vuejs在v-for中,利用index来对第一项添加class的方法 Vue.js常用指令汇总(v-if.v-for等)

  • element-ui table行点击获取行索引（index）并利用索引更换行顺序

    1)将每一行的索引插入操作行中,即为每一行数据添加一个属性index 使用el-table已经给处的方法:tableRowClassName html中: <el-table :row-class-name="tableRowClassName"></el-table> js中:只需放入methods中即可,el-table会自动触发(不知道为什么贴源码不行啊) 点击进行事件操作: 在el-table-column中加入slot,可以拿到当前点击列所属的行,并完

  • 关于Element UI table 顺序拖动方式

    关于Element UI table 顺序拖动方式

    目录 Element UI table 顺序拖动 基本使用 element关于table拖拽排序问题 Element UI table 顺序拖动 使用Sortable.js插件.对element-ui中的el-table进行拖拽行排序. new Sortable(example1, { animation: 150, ghostClass: 'blue-background-class' }); 官网: [1] Sortable.js官网配置项说明等 [2] Sortable更多使用示例 基本使

  • vuejs+element UI table表格中实现禁用部分复选框的方法

    有时候我们构建这样带一列复选框的表格 然后希望根据条件禁用某个列表项的选择框,可以这样写 HTML: JS: 以上这篇vuejs+element UI table表格中实现禁用部分复选框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 使用 Element UI Table 的 slot-scope方法

    使用 Element UI Table 的 slot-scope方法

    在 Element UI Table 的官网上,有一个"筛选"功能,里面可以利用 slot-scope,给表格记录打标签. 关键代码为: <template slot-scope="scope"> <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag>

  • Element UI table参数中的selectable的使用及遇到坑

    Element UI table参数中的selectable的使用中遇到的坑:页面: <el-table-column :selectable='selectable' type="selection" :reserve-selection="true"> </el-table-column> 网上搜了说这样: selectable(row,index) { if(row.id==="10001"){ return fal

  • element ui table（表格）实现点击一行展开功能

    element ui table（表格）实现点击一行展开功能

    前言 element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击右箭头可以展开,我们的很多需求是点击某一行展开 那是不是无法实现呢?其实,借助element ui的一些属性,轻松实现点击某行展开,我们还是用2.0.9版本官网的例子, 对齐改造,使之可以做到这点 <template> <el-table :data="tableData5&

  • element ui table 增加筛选的方法示例

    网上大部分都可以增加筛选功能,但没有找到下列这种情况. 若表头数据较多,而表头是自己通过v-for循环产生,这种情况怎么给虚拟dom添加筛选规则. <el-table-column v-for="item in tableHead" :key="item.id" :prop="item.id" :label="item.label" :filters="item.filter" :filter-met

  • Element UI中table单元格合并的解决过程

    Element UI中table单元格合并的解决过程

    目录 引言 解决思路: 1.格式化后台返回的数据(根据实际数据格式处理) 2.在 data 中定义数据,需要合并几列就定义几个数组和索引 3.定义合并函数 4.table 组件属性 span-method 的单元格合并方法: 完整代码: 总结 引言 项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 table 组件的 span-method 属性.

  • jQuery实现获取table中鼠标click点击位置行号与列号的方法

    jQuery实现获取table中鼠标click点击位置行号与列号的方法

    本文实例讲述了jQuery实现获取table中鼠标click点击位置行号与列号的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 鼠标点击位置行列号</title> </head> <bo

  • Layui组件Table绑定行点击事件和获取行数据的方法

    一个项目里面用了layui,简直无数个坑... 这里先记录一个行点击事件的坑,后面慢慢补充. 初始化表格完成后利用事件给table(定位table需要在HTML代码中给table放入指定div)的tr绑定双击事件,然后获取Index,再从数据集里面取出行数据; done: function(res, curr, count){ $('#div').find('.layui-table-body').find("table" ).find("tbody").child

随机推荐