其实炒鸡简单。。。

 

<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. PHP srand() 函数

    实例 播种随机数生成器: <?phpsrand(mktime());echo(rand());?>高佣联盟 www.cgewang.com 定义和用法 srand() 函数播种随机数生成器 ...

  2. 解析Class文件

    类文件解析的入口是ClassFileParser类中定义的parseClassFile()方法.上一小节得到了文件字节流stream后,接着会在ClassLoader::load_classfile( ...

  3. SET DYNAMICS 365 COLORS AND LOGO USING THEMES

    https://carldesouza.com/dynamics-365-colors-logo-themes/ BEFORE WE START, I NEED YOUR HELP. I AM SPE ...

  4. intel:spectre&Meltdown侧信道攻击(二)

    上面一篇介绍了spectre&meltdown基本原理和简单的demo方案,今天继续学习一下该漏洞发现团队原始的POC:https://spectreattack.com/spectre.pd ...

  5. 通过源代码分析Mybatis的功能

    SQL解析 Mybatis在初始化的时候,会读取xml中的SQL,解析后会生成SqlSource对象,SqlSource对象分为两种. DynamicSqlSource,动态SQL,获取SQL(get ...

  6. C 语言学习 --2

    memset Declaration: void *memset(void *str, int c, size_t n); Copies the character c (an unsigned ch ...

  7. 关于if语句的细节

    看下面两个语句: if(p->key>key) p=p->left; if(p->key<key)p=p->right; 上面的写法是很有问题的: 如果第一条条件满 ...

  8. 【BZOJ2724】蒲公英 题解(分块+区间众数)

    题目链接 题目大意:给定一段长度为$n$的序列和$m$次询问,每次询问区间$[l,r]$内的最小的众数.$n\leq 40000,a_i\leq 10^9$ --------------------- ...

  9. ios 浅谈一下UITextFiled UITextView 在tableview的cell上边展示

    最近在项目中.要做到在tableview的cell上边加一个输入框.允许用户输入. 1.我首先选的是在uitextView  然后在通知键盘出现的时候,将tableview的内容设置在键盘的上边.但是 ...

  10. python1.1列表知识点:

    #定义列表[]a=[1,2,3,4,5,6,7,"hello","world"]#列表索引从0开始,指定位置提取元素print(a[3])print(a) #列 ...