其实炒鸡简单。。。

 

<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. 5.19 省选模拟赛 小B的夏令营 概率 dp 前缀和优化dp

    LINK:小B的夏令营 这道题是以前从没见过的优化dp的方法 不过也在情理之中. 注意读题 千万不要像我这个sb一样 考完连题意都不知道是啥. 一个长方形 要求从上到下联通的概率. 容易发现 K天只是 ...

  2. springboot2.1.x版本报错总结

    我使用的是springboot  2.1.7.RELEASE  springcloud  Greenwich.SR2 boot和cloud对应的版本号不能搞混,对应版本请参考https://sprin ...

  3. Spring学习总结(8)-接口多个实现类的动态调用

    需求描述:当一个接口有2个以上的实现类时,调用方需要根据参数选择只其中一个实现类 Spring版本:5.1.8.RELEASE 1. 接口和实现类 /** * 接口 */ public interfa ...

  4. [转]new一个对象的过程中发生了什么?

    来自:沉默哥 | 公号 :程序员小乐 链接:cnblogs.com/JackPn/p/9386182.html Java在new一个对象的时候,会先查看对象所属的类有没有被加载到内存,如果没有的话,就 ...

  5. Flink状态妙用

    本文主要介绍福布湿在flink实时流处理中,state使用的一些经验和心得.本文默认围观的大神已经对flink有一定了解,如果围观过程中发现了有疑问的地方,欢迎在评论区留言. 1. 状态的类别 1.1 ...

  6. Android ViewPager进行碎片(Fragment)的分页操作

    今天讲的是ViewPager 这个东西就是 假设你写了Fragment和Fragment1两个界面,用这个控件就可以实现两个界面之间的滑动,而不用Intent去跳转: 注意: 在布局中定义控件的时候, ...

  7. Python 爬虫工程师必看,深入解读字体反爬虫

    字体反爬虫开篇概述 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识.那么针对这三类人 ...

  8. Java 集合框架综述,这篇让你吃透!

    一.集合框架图 简化图: 说明:对于以上的框架图有如下几点说明 1.所有集合类都位于java.util包下.Java的集合类主要由两个接口派生而出:Collection和Map,Collection和 ...

  9. C#LeetCode刷题之#118-杨辉三角(Pascal‘s Triangle)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3688 访问. 给定一个非负整数 numRows,生成杨辉三角的前 ...

  10. Escalate_my_privilege 靶机

    1:扫描主机ip 2:扫描端口发现 22 80 111 3:目录扫描,发现一些平常的页面 4:进入robots.txt发现一个类型命令行的界面,查看是个低权限,但是在home目录下的armour发现密 ...