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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
js日期相关函数总结分享
Oct 15 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
js运动事件函数详解
Oct 21 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 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
php调用新浪短链接API的方法
2014/11/08 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
C/C++有关内存的思考题
2015/12/04 面试题
一道SQL面试题
2012/12/31 面试题
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
航海技术专业毕业生求职信
2014/04/06 职场文书
奔腾年代观后感
2015/06/09 职场文书
Python图片检索之以图搜图
2021/05/31 Python
详解Python函数print用法
2021/06/18 Python
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技