elementUI 表格多行上移下移、单行移动、拖拽移动（行，列）

多行上移下移 主要代码

实现效果，勾选多行整体上移或者下移

   //移动后更新排序
    moveUpdateSort(tableList){
      for(let i in tableList){//tableList表格数据
        tableList[i].sort = this.currentPage+i//sort 是存储当前行数据的排序字段
        if(tableList[i].id){
          updateDiyTableData(tableList[i]).then((res) =>{
          }).catch((err) =>{
          })
        }
      }
      // this.getChooseItemstable();
    },
      //所有上移
    allToTop(){//multipleSelection 勾选的行对象
     for(let i = this.multipleSelection.length-1;i >= 0; i--){//上移的时候，应该从数组的最后一个对象开始往数组前插入，这样能保证上移后的顺序是对的
      let moveId = this.multipleSelection[i].id;//需要上移循环的所有id
      this.tableList.forEach((item, index) => {//原来的表格数组对象
          if (item.id == moveId) {
            let obj = {}
            obj = item
            this.tableList.splice(index, 1)//根据删除原数组里面需要移动的对象
            this.tableList.unshift(obj)//再将删除的对象依次插入数组的最前面
          }
        })
      }
      this.moveUpdateSort(this.tableList);//更新数组对象到后端
    },
     //所有下移 逻辑同上，只是将需要移动的数据删除后添加到数组最后，
    allToBottom(){
      for(let i  in this.multipleSelection){
         let moveId = this.multipleSelection[i].id;
         this.tableList.forEach((item, index) => {
          if (item.id == moveId) {
            let obj = {}
            obj = item
            this.tableList.splice(index, 1)
            this.tableList.splice(this.tableList.length - 1, 0, obj);//这边插入的是数组的倒数第一个对象前面
          }
        })
     }
     this.moveUpdateSort(this.tableList);
    },

单行移动

 <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="moveUp(scope.row, scope.$index)"
                  :disabled="scope.$index === 0"
                >上移</el-button>
                <!-- 这里分别展示了判断是否上移下移的两种方案 -->
                <el-button
                  type="text"
                  size="small"
                  @click="moveDown(scope.row, scope.$index)"
                  :disabled="getFormLength(scope.$index)"
                >下移</el-button>
              </template>
            </el-table-column>


     // 上移
    moveUp(item, index) {
      this.tableList.splice(index - 1, 0, item);  // 定位到点击位置的上一行，0即不删除如何元素，在此位置插入item
      this.tableList.splice(index + 1, 1); // 此时数组中有重复元素，把原来被挤下去的元素删除
      this.moveUpdateSort(this.tableList);//更新数组对象到后端
    },
    // 下移
    moveDown(item, index) {
      console.log(index)
      this.tableList.splice(index + 2, 0, item);
      this.tableList.splice(index, 1);
      this.moveUpdateSort(this.tableList);//更新数组对象到后端
    },
      // 控制下移按钮的显示于隐藏
    getFormLength(index) {
      if (index === this.tableList.length - 1) return true;
      else
       return false;
    },

拖拽移动（行，列）

安装依赖：npm install sortablejs --save 

<template>
  <div style="width:800px">
    <el-table :data="tableData"
      border
      row-key="id"
      align="left">
     <el-table-column v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :label="item.label"> 
      </el-table-column>
    </el-table>
    <pre style="text-align: left">
      {{dropCol}}
    </pre>
    <hr>
    <pre style="text-align: left">
      {{tableData}}
    </pre>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      col: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      dropCol: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      tableData: [
        {
          id: '1',
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 100 弄'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 200 弄'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 300 弄'
        },
        {
          id: '4',
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 400 弄'
        }
      ]
    }
  },
  mounted() {
    this.rowDrop()
    this.columnDrop()
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        group : {
           name : "words",
           pull : true,
           put : true
        },
        animation : 150, //动画参数
        onAdd : function(evt) {//拖拽时候添加有新的节点的时候发生该事件
            
        },
        onUpdate : function(evt) {//拖拽更新节点位置发生该事件
            console.log('onUpdate.foo:', [evt.item, evt.from]);
        },
        onRemove : function(evt) {//删除拖拽节点的时候促发该事件
            console.log('onRemove.foo:', [evt.item, evt.from]);
        },
        onStart : function(evt) {//开始拖拽出发该函数
            console.log('onStart.foo:', [evt.item, evt.from]);
        },
        onSort : function(evt) {//发生排序发生该事件

            console.log('onUpdate.foo:', [evt.item, evt.from]);
        },
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }
  }
}
</script>
<style scoped>
</style>