elemetn 表格组件行与行之间实现上移下移

Posted 2021-08-01 水星记_

前言

内容比较基础，但对于刚入门的人来说或许是一个窗口，博客将持续更新改进，请关注收藏...

---

实现效果

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>

data

 data() {
    return {
		tableData:[],//表格数据
	};
  },

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,
          });
        }
      });
    },
  },