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;
      }
    },
可以直接拿去使用,有不懂或者需要源码的,可以私聊哈

你可能感兴趣的:(js常用案例,vue日常小知识,基础知识,javascript)