教你一招，element表格行轻松上下移动_element穿梭框上下移动

前言

当我们在使用 element 表格时，经常会遇到需要对表格中的行进行上移或下移的情况。这个功能的实现还是比较简单的。本文将为大家介绍如何使用 element 表格组件轻松实现行与行之间的上下移动，让你的表格操作更加高效便捷。

---

实现效果

---

html

  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="redeemNum" label="已兑换"></el-table-column>
      <el-table-column prop="stock" label="兑换库存"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="rank" label="排序">
        <!-- //上移下移  (scope.$index)点击事件拿到当前下标-->
        <template slot-scope="scope">
          <div class="upper" @click="handelUpper(scope.$index)">
            <img src="@/assets/img/上.png" alt />
          </div>
          <div class="lower" @click="handelDown(scope.$index)">
            <img src="@/assets/img/下.png" alt />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handelEdit(scope.row.id)">编辑</el-button>
          <el-button @click="handleDel(scope.row.id)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

data

 data() {
    return {
		tableData:[],//表格数据
	};
  },
1
2
3
4
5

js

 methods: {
    // 上移
    handelUpper(index) {
      // 后台需要的上层以及下层的id
      const data = {
        downId: this.tableData[index].id,//下层id
        upId: this.tableData[index - 1].id,//上层id
      };
      // MoveDown 接口
      MoveDown(data).then((res) => {
        console.log(res, "上移");
        if (res.code == 200) {
          //  this.IntegralGoodsInfoInfo 调用表格的方法 (this.currentPage, this.pageSize)里面两个参数分别是页码 页数
          this.IntegralGoodsInfoInfo(this.currentPage, this.pageSize);
        } else if (res.code == -2001) {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    // 下移
    handelDown(index) {
      // 后台需要的上层以及下层的id
      const data = {
        downId: this.tableData[index + 1].id,//下层id
        upId: this.tableData[index].id,//上层id
      };
      // MoveDown 接口
      MoveDown(data).then((res) => {
        console.log(res, "下移");
        if (res.code == 200) {
          //  this.IntegralGoodsInfoInfo调用表格的方法 (this.currentPage, this.pageSize) 里面两个参数分别是页码 页数
          this.IntegralGoodsInfoInfo(this.currentPage, this.pageSize);
        } else if (res.code == -2001) {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

---

相关推荐

⭐ 用vue和sortableJS轻松实现表格拖拽排序
⭐ vue+element实现树形上下拖拽，快速提升你的前端技能