其实炒鸡简单。。。

 

<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. html实现a元素href的URL链接自动刷新或新窗口打开

    有时我们想实现这样一个功能,点击一个链接,如果这个链接浏览器已经打开过,则刷新已经打开的链接窗口:如果这个链接没有打开过,则使用新窗口打开这个链接页面. 这是一个非常好的体验增强功能,可以有效避免浏览 ...

  2. springMVC请求路径 与实际资源路径关系

    个人理解: 请求路径可以分为两部分:不通过springmvc转发的url:通过springmvc转发的url: 通过特定的配置,告诉springmvc哪些url需要从springmvc处理,处理后再跳 ...

  3. ACL2020 Contextual Embeddings When Are They Worth It 精读

    上下文嵌入(Bert词向量): 什么时候值得用? ACL 2018 预训练词向量 (上下文嵌入Bert,上下文无关嵌入Glove, 随机)详细分析文章 1 背景 图1 Bert 优点 效果显著 缺点 ...

  4. 再也不怕别人动电脑了!用Python实时监控

    作者:美图博客 https://www.meitubk.com/zatan/386.html 前言 最近突然有个奇妙的想法,就是当我对着电脑屏幕的时候,电脑会先识别屏幕上的人脸是否是本人,如果识别是本 ...

  5. Html视频播放同时获取当前帧下的图片

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. spring data jpa 代码生成!!(精华帖)

    通过数据库动态生成自己想要生成的各种模板,需要了解grovery. view -> Tool Windows -> Database + -> Data source -> M ...

  7. 19、Java 序列化

    1.序列化的概念,意义以及使用场景 序列化: 将对象写入到IO流中,也就是把Java对象转换为字节序列的过程 反序列化: 从IO流中恢复对象*,也就是把字节序列恢复为Java对象的过程 意义: 序列化 ...

  8. Python学习笔记之 Python设计思想&设计原则

    Python设计思想&设计原则 设计思想 1.封装 数据角度 多种数据合为一种数据 优势:代码可读性高            将数据与行为相关联 例如:电脑(内存,储存空间,...) 行为角度 ...

  9. Dubbo系列之 (二)Registry注册中心-注册(1)

    引导 dubbo的服务的注册与发现,需要通过第三方注册中心来协助完成,目前dubbo支持的注册中心包括 zookeeper,consul,etcd3,eureka,nacas,redis,sofa.这 ...

  10. C#LeetCode刷题之#242-有效的字母异位词(Valid Anagram)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4040 访问. 给定两个字符串 s 和 t ,编写一个函数来判断 ...