vue+element实现表格上移下移

之前为了实现功能,网上找了一大堆各位前辈写的代码,还是整合了一下,适用于自己的代码
功能主要实现依赖vue的this.$set(target,obj,resourse)
 <el-table
          v-if="testShow"
          ref="interfaceTable"
          class="com-table"
          :height="tableHeight"
          v-loading="loading"
           element-loading-text="正在处理数据请稍等..."
      element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
          :data="structureList"
          border
          :highlight-current-row="true"
          :row-class-name="tableRowClassName"  //这个是关键
          @row-click="rowClickFunc"
        >
// 把每一行的索引放进row
//这一步不可少,上移下移是通过index去做的判定
    tableRowClassName({ row, rowIndex }) {
      var _this = this;
      row.index = rowIndex;
      if (_this.isTableActive) {
        return "active-row ";
      }
    },

// 上移
    handleUp() {
      var _this = this;
//tableIndex 默认为0
      if (_this.tableIndex == 0) {
        _this.$message({
          message: "处于顶端,不能继续上移",
          type: "warning"
        });
      } else {
       
        const len = _this.structureList[_this.tableIndex - 1];
        this.$set(
          _this.structureList,
          _this.tableIndex - 1,
          this.structureList[_this.tableIndex]
        );
        this.$set(_this.structureList, _this.tableIndex, len);
        console.log(this.structureList);
        this.$refs.interfaceTable.doLayout();

        _this.tableIndex -= 1;
      }
    },
 // 下移
    handleDown() {
      var _this = this;
      if (_this.tableIndex + 1 === _this.structureList.length) {
        _this.$message({
          message: "处于末端,不能继续下移",
          type: "warning"
        });
      } else {
      
        const len = this.structureList[_this.tableIndex + 1];
        this.$set(
          this.structureList,
          _this.tableIndex + 1,
          this.structureList[_this.tableIndex]
        );
        this.$set(this.structureList, _this.tableIndex, len);

       
        _this.tableIndex += 1;
      }
    },
可以直接拿去使用,有不懂或者需要源码的,可以私聊哈
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玖逸少女梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值