其实炒鸡简单。。。

 

<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 zip_open() 函数

    定义和用法 zip_open() 函数打开 zip 档案以供读取.高佣联盟 www.cgewang.com 如果成功,该函数则返回 zip 文件资源.如果失败,则返回 FALSE. 语法 zip_op ...

  2. C++模板沉思录(上)

    花下猫语: 在我们读者群里,最近出现了比较多关于 C++ 的讨论,还兴起了一股学习 C++ 的风气.樱雨楼小姐姐对 C++ 的模板深有研究,系统地梳理成了一篇近 4 万字的文章!本文是上篇,分享给大家 ...

  3. P1429 平面最近点对[加强版] 随机化

    LINK:平面最近点对 加强版 有一种分治的做法 因为按照x排序分治再按y排序 可以证明每次一个只会和周边的六个点进行更新. 好像不算很难 这里给出一种随机化的做法. 前置知识是旋转坐标系 即以某个点 ...

  4. Linux的VMWare中Centos7文件查找(find-grep)和vim文本编辑器基操

    一.find文件查找 grep 匹配字段 文件名 ——筛选文件   find查找 语法参数示例 格式: find 查找范围 查找类型 参数   find / -name *.conf   按文件名查找 ...

  5. Spring Security和Swagger2集成报错

    出现问题的项目算是一个新项目,但基本的脚手架代码是从另一个项目里迁过来的,原项目并没有报错,只有新项目才报异常.看报错内容,判断发生冲突的主要是spring-boot-starter-security ...

  6. “随手记”开发记录day08

    今天完成了关于统计页面中的关于每月支出和每月收入的页面

  7. ECS7天实践进阶训练营Day1:使用阿里云ECS,快速搭建、管理VuePress静态网站

    一.概述 VuePress是2018年由尤雨溪发布的一个全新的基于Vue的静态网站生成器,它是一个非常轻量级的静态网站生成器.VuePress主要用于生成技术文档,其类似于Gitbook,我们可以用于 ...

  8. 在Linux下安装nginx服务器详细教程

    首先安装centos的扩展源 yum install epel-release 安装Nginx 方法一: yum install nginx -y 查看版本号,开启nginx,查看进程 nginx – ...

  9. C# BackGroundWorker实现窗体不卡死 进度条功能

    网上的例子少了好多属性的配置,改好了一个能直接用的: using System; using System.Collections.Generic; using System.ComponentMod ...

  10. java标识符、关键字、基本数据类型

    一 标识符与关键字 1.标识符 在程序中用于定义名称的都为标识符,如文件名称.类名称.方法名称或变量名称等, 在Java中标识符的定义格式由字母.数字._(下划线),$所组成,不能以数字开头, 不能是 ...