VUE+ElementUI实现table 行上下移动的效果

1.先看一下效果：
在table中这样写就好了：

<el-table-column align="center"  label="移动操作" min-width="80">
                                <template slot-scope="scope">
                                    <el-button size="medium" type='text' style="font-size:20px;" @click.stop="configUp(scope.$index, scope.row)">↑</el-button>
                                    <el-button size="medium" type='text' style="font-size:20px;" @click.stop="configDown(scope.$index, scope.row)">↓</el-button>
                                </template>
                            </el-table-column>

然后就是要引入 import Vue from 'vue'

那方法就是以下代码了：

// 上移
    configUp(index, row) {
      if (index === 0) {
        this.$message({
          message: '已经是列表中第一行!',
          type: 'warning'
        })
      } else {
        const temp = this.listyst[index - 1]
        Vue.set(this.listyst, index - 1, this.listyst[index])
        Vue.set(this.listyst, index, temp)
        this.showListbut = true
      }
    },
    // 下移
    configDown(index, row) {
      if (index === (this.listyst.length - 1)) {
        this.$message({
          message: '已经是列表中最后一行!',
          type: 'warning'
        })
      } else {
        const i = this.listyst[index + 1]
        Vue.set(this.listyst, index + 1, this.listyst[index])
        Vue.set(this.listyst, index, i)
        this.showListbut = true
      }
    },

其中this.listyst是:data = "listyst" 的表格数据

再就是移动完把顺序传给后台的方法：

// 移动完保存 budgeIcle
    keepBut() {
    //这个是移动完要把orderNum按新的顺序传给后台
      for (var i = 0; i < this.listyst.length; i++) {
        this.listyst[i]['orderNum'] = (i + 1)
      }
      const tempData = {
        list: this.listyst,
        opUser: this.opUser,
        opUserName: this.opUserName
      }
      budgeIcle(tempData).then(response => {
        if (response.data.code == 200) {
          this.$message({
            title: '成功',
            message: '排序成功',
            type: 'success',
            duration: 3000
          })
          // this.getList()
        } else {
          this.$notify({
            title: '警告',
            message: response.data.msg,
            type: 'warning',
            duration: 3000
          })
        }
      })
      this.showListbut = false
    },

这个就是这样。