1、行排序

HTML

<el-table-column label="排序" width="80">
        <template slot-scope="scope">
          <el-button class="operatBtn" size="mini" icon="el-icon-top"
                     :disabled="scope.$index===0"
                     @click="moveUp(scope.$index,scope.row)">
          </el-button>
          <el-button class="operatBtn" size="mini" icon="el-icon-bottom"
                     :disabled="scope.$index===(tabList.length-1)"
                     @click="moveDown(scope.$index,scope.row)">
          </el-button>
        </template>
      </el-table-column>

JS

//向上移动
    moveUp(index,row) {
          
   
      let that = this;
      if (index > 0) {
          
   
        let upDate = that.tabList[index - 1];
        that.tabList.splice(index - 1, 1);
        that.tabList.splice(index,0, upDate);
      } else {
          
   
        alert(已经是第一条，不可上移);
      }
    },
    //向下移动
    moveDown(index,row){
          
   
      let that = this;
      if ((index + 1) === that.tabList.length){
          
   
        alert(已经是最后一条，不可下移);
      } else {
          
   
        let downDate = that.tabList[index + 1];
        that.tabList.splice(index + 1, 1);
        that.tabList.splice(index,0, downDate);
      }
    },

2、拖拽排序

mounted() {
          
   
    this.rowDrop();
  }

//行拖拽
    rowDrop() {
          
   
      const tbody = document.querySelector(.el-table__body-wrapper tbody)
      const _this = this
      Sortable.create(tbody, {
          
   
        onEnd({
          
    newIndex, oldIndex }) {
          
   
          const currRow = _this.tabList.splice(oldIndex, 1)[0]
          _this.tabList.splice(newIndex, 0, currRow)
        }
      })
    },