前端js实现表格数据的上移下移

vue项目需求中需要前端实现表格行数据的上移下移，效果如下

实现思路：主要使用前端对数组的操作方法splice()

代码：

    tableData: [{name: '1',id: '1'}, {name: '2',id: '2'}, {name: '3',id: '3'}, {name: '4',id: '4'}, {name: '5',id: '5'}]<el-table-column width="180"><template slot-scope="scope"><el-buttontitle="上移"@click="moveup(scope.$index)"icon="icon-arrow_up"></el-button><el-buttontitle="下移"@click="movedown(scope.$index)"icon="icon-arrow_down"></el-button></template></el-table-column>moveup (val) {let x = val; let y = val + 1this.tableData.splice(x - 1, 1, ...this.tableData.splice(y - 1, 1, this.tableData[x - 1]))},movedown (val) {let x = val + 1; let y = val + 2this.tableData.splice(x - 1, 1, ...this.tableData.splice(y - 1, 1, this.tableData[x - 1]))},

前端js实现表格数据的上移下移相关推荐

js如何实现数组数据的上移下移
Vue项目开发中碰到对表格数据实现上移,下移的需求,只是纯前端实现移动数组数据,不跟服务端做交互. 经研究,用splice方法简洁优雅,具体实现如下: // 上移,下移onMove(code, dir ...
html表格查找,js实现表格数据搜索
本文实例为大家分享了js实现表格数据搜索的具体代码,供大家参考,具体内容如下表格数据搜索名称城市 Alfreds Futterkiste Germany Berglunds snabbkop S ...
elementUI 表格多行上移下移、单行移动、拖拽移动（行，列）
多行上移下移主要代码实现效果,勾选多行整体上移或者下移 //移动后更新排序moveUpdateSort(tableList){for(let i in tableList){//tableList ...
纯前端导入excel表格数据
安装插件 js-xlsx npm install xlsx --save js-xlsx 使用js-xlsx时,前端可以将后端返回的json数据拼接成自己需要导出的格式,下载到电脑中,完全不依赖后端. ...
表格设置翻页 html,使用原生JS实现表格数据的翻页功能
使用原生JS实现如下图所示表格数据的翻页功能: HTML代码: 表格标题 < > 简单处理一下样式,CSS代码: #pagination { text-align: center; } # ...
前端导出excel 表格数据1w条数据以上-批量导出
1.下载插件 npm install -S file-savernpm install xlsx@0.16.0 -Snpm install -D script-loader 2.1新建 Export2 ...
前端怎么导出表格_前端如何导出表格数据
" 最近在搞前端数据导出功能,所以就在网上查了一下,然后就使用,需要的小伙伴们可以看看,如果哪里写错了,记得留言," 新建一个js文件 function outputTable ( ...
js 获取表格数据（表单变量值）
js获取表单中的指定动态变量问题描述:for循环实现表格每行数据输入,对应每行有提交表单需要做相应处理,我们需要获得该行某列的变量值要求:表格每一行有一个提交按钮实现前台判断操作(判断表格每行第二 ...
使用js对表格数据排序
js实现如下 // 设置升序还是降序,默认是升序var flag=true;function itemSort(){// 1. 获得表格var itemTable=document.getElemen ...

前端js实现表格数据的上移下移

前端js实现表格数据的上移下移相关推荐

最新文章

热门文章