Vue实现table上下移动功能示例


Posted in Javascript onFebruary 21, 2019

本文实例讲述了Vue实现table上下移动功能。分享给大家供大家参考,具体如下:

结合Element组件,scope中有三个参数(row,cow,$index)分别表示行内容、列内容、以及此行索引值,

table上绑定数组 :data="tableList"

<el-table :data="tableList">
</el-table>

添加一列,里面放上上移和下调两个按钮,并绑定上函数,将此行的索引值(scope.$index)作为参数,样式根据需求自己调整:

<el-button icon="el-icon-arrow-up" :disabled="scope.$index === 0" @click="upFieldOrder(scope.$index)"></el-button>
<el-button icon="el-icon-arrow-down" :disabled="scope.$index === tableList.length - 1" @click="downFieldOrder(scope.$index)"></el-button>

直接使用下面这种方式是错误的,虽然tableList的值变了,但是不会触发视图的更新:

upFieldOrder (index) {
  let temp = this.tableList[index-1];
  this.tableList[index-1] = this.tableList[index]
  this.tableList[index] = temp
 },

正确的上移函数:

upFieldOrder (index) {
  let temp = this.tableList[index-1];
  Vue.set(this.tableList, index-1, this.tableList[index])
  Vue.set(this.tableList, index, temp)
 },

同理,下移函数如下:

downFieldOrder (index) {
  let i = this.tableList[index+1];
  Vue.set(this.tableList, index+1, this.tableList[index])
  Vue.set(this.tableList, index, i)
 }

如此,前端的调整table顺序功能便做好了,我不是在每一次点击都与后台交互传入新Order,在页面销毁时,一并提交:

destroyed() {
 let param = {
  infos: []
 }
 this.tableList.forEach((dataItem,index) => {
  param.infos.push({
  参数1: dataItem.值1,
  参数1: dataItem.值2,
  参数顺序: index
  })
 });
 // 调用后台,并传入 param
 changeTableOrder(param).then(res => {
  if(res.success=== true) {
 alert('顺序调整成功')
  }
 })
 }

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
JQuery 学习笔记 element属性控制
Jul 23 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
canvas实现钟表效果
Feb 13 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 #Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 #Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 #Javascript
ES6基础之默认参数值
Feb 21 #Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 #Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 #Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 #Javascript
You might like
mysql limit查询优化分析
2008/11/12 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
Python的时间模块datetime详解
2017/04/17 Python
python 生成器协程运算实例
2017/09/04 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
土木工程毕业生推荐信
2013/10/28 职场文书
化学实验员岗位职责
2013/12/28 职场文书
工地标语大全
2014/06/18 职场文书
委托书怎么写
2014/07/31 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
同学毕业留言寄语
2015/02/27 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL