其实炒鸡简单。。。

 

<el-table :data='tableData' >
...
...
 <el-table-column label="操作" align="center" width="140" >
         <template slot-scope="scope">
              <el-button type="text" @click="upMove(scope.$index,scope.row)">上移</el-button>
              <el-button type="text" @click="upDown(scope.$index,scope.row)">下移</el-button>
          </template>
</el-table-column>
</el-table>
 
export default{
  methods:{   
    upMove(index, row) {
      if (index <= 0) {
        this.$message.error('不能继续向上移动')
      } else {
        const upData = this.tableData[index - 1]
        this.tableData.splice(index - 1, 1)
        this.tableData.splice(index, 0, upData)
      }
    },
    upDown(index, scope) {
      if (index === (this.tableData.length - 1)) {
        this.$message.error('不能继续向下移动')
      } else {
        const downData = this.tableData[index + 1]
        this.tableData.splice(index + 1, 1)
        this.tableData.splice(index, 0, downData)
      }
    }
  }
}

elementUI table怎么实现点击上移下移的更多相关文章

  1. JS移动li行数据,点击上移下移(是位置的互换,不是top的偏移量改变)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. table中实现数据上移下移效果

    html 由于vue+Element项目中的table,没有开放的上移下移的api,但是能对数据操作,故思路为数组中的一条数据,再重新添加一条数据,办法有点笨,但是好歹也是实现了,望有好的办法的,请留 ...

  3. 05_jquery 操作table使tr(数据)整行上移下移

    1:ajax请求数据到页面 function GetWorkSpaceList() { GetServerData("get", GetEnterpriseUrl() + &quo ...

  4. jQuery实现表格行上移下移和置顶

    jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...

  5. php修改排序,上移下移

    php修改排序,上移下移 /**    $UpDown //移动方向,up或down    $table //表名    $id //当前移动的ID    $id_col //ID字段的名称    $ ...

  6. ElementUI - Table 表头排序

    ElementUI - Table 表头自带排序功能,和排序事件,但是目前只是对当前界面的数据进行排序. 项目需求: 点击表头排序的时候,对所有数据进行排序. 初步方案: 在点击排序按钮的时,在排序事 ...

  7. jqgrid 上移下移单元格

    在表格中常常需要调整表格中数据的显示顺序,我用的是jqgrid,实现原理就是将表中的行数保存到数据库中,取数据时按行进行排序 1.上移,下移按钮 <a href="javascript ...

  8. javaWeb上移下移(SpringMVC+Mabits+MySql)

    文章已移至:https://blog.csdn.net/baidu_35468322/article/details/79643356 移动之前: 移动之后: 1.控制层 /** * 修改排序 * * ...

  9. Vue Element-ui table只展开一行

    直接上代码了哈~ <template> <div class="app-content"> <div class="table_expand ...

随机推荐

  1. CF613D Kingdom and its Cities 虚树 树形dp 贪心

    LINK:Kingdom and its Cities 发现是一个树上关键点问题 所以考虑虚树刚好也有标志\(\sum k\leq 100000\)即关键点总数的限制. 首先当k==1时 答案显然为0 ...

  2. SparkBench安装使用入门

    SparkBench安装以及快速开始 欢迎关注我的GitHub~ 本指南假定已经可以正常使用Spark 2.x,并且可以访问安装它的系统. 系统环境 CentOS 7.7.1908 Ambari-Sp ...

  3. Android 进度条(ProgressBar)和拖动条(Seekbar)补充“自定义组件”(总结)

    这周结束了,我也码了一周的字,感觉还是很有种脚踏实地的感觉的,有时间就可以看看自己的总结再查漏补缺,一步一个脚印,做出自己最理想的项目. 今天我们讲两点: 1.ProgressBar: 其实前面也稍微 ...

  4. Meow 攻击会删除不安全(开放的)的Elasticsearch(及MongoDB) 索引,然后建一堆以Meow结尾的奇奇怪怪的索引(如:m3egspncll-meow)

    07月29日,早上照例一来,先连接Elasticsearch查看日志[禁止转载,by @CoderBaby],结果,咦,什么情况,相关索引被删除了,产生了一堆以Meow开头的奇奇怪怪的索引,如下图: ...

  5. C - 一个C语言猜字游戏

    下面是一个简陋的猜字游戏,玩了一会儿,发现自己打不过自己写的游戏,除非赢了就跑,最高分没有过1000. 说明:srand(time(NULL))和rand(),srand,time和rand都是函数, ...

  6. GitHub 热点速览 Vol.32:VScode 韭菜基金插件,极大提高“工作”效率

    作者:HelloGitHub-小鱼干 摘要:有什么比干着本职工作--编码,而又兼顾"外快"--炒股更有开心的事情呢?leek-fund 就是这么一个极大提升你工作幸福度和效率的插件 ...

  7. shazidouhui的使用体验

    这个软件有三个界面,一个是我的,一个是已批改作业,一个是未完成作业,但是,我不知道怎么用除了“我的”这个界面以外的其他两个界面,这一点还是需要优化优化,另外就是登陆界面确实还存在一点问题,有待改进.

  8. vue或者js中平均分割数组

    vue中 把一段长数组按照指定份数 均分 sliceArray(array, size) { var result = []; for (var x = 0; x < Math.ceil(arr ...

  9. 关于 JavaScript 字符串的一个小知识

    说起字符串,我们再熟悉不过了.接触编程的第一个经典任务就是输出字符串:Hello, world.但是你知道 JavaScript 字符串在计算机里是怎么表示的吗? 最简单直观但不太准确的的理解就是,字 ...

  10. Clion C++ 乱码,debug乱码

    Clion新建项目,默认是使用UTF-8 Clion点击运行图标,使用的terminal不能正常显示UTF-8,因为其使用的是GBK编码 所以只要将源文件编码改为GBK就好了 1.界面右下角,有个UT ...