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 继承详解 第一篇
Aug 30 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
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
PHP小教程之实现双向链表
2014/06/12 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
python接入支付宝的实例操作
2020/07/20 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
大学生表扬信范文
2014/01/09 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
兽医医药专业求职信
2014/07/27 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
四风之害观后感
2015/06/09 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server