vue el-table 行排序 + 拖拽排序 简单粗暴

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