VUE2表格行上下移动（父子、多层级）

一个单独的vue文件，随便找个vue项目就能运行起来，封装的不是很好，各位大佬看看就行，可以多层级上下移动

<template>
  <div class="table">
    <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :default-expand-all="true"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="date" label="日期" sortable width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              type="text"
              size="mini"
              @click="goWhere(scope, 1)"
              :disabled="scope.row.indexLine[scope.row.indexLine.length - 1] == 0"
          >
            置顶
          </el-button>
          <el-button
              type="text"
              size="mini"
              @click="goWhere(scope, 0)"
              :disabled="scope.row.indexLine[scope.row.indexLine.length - 1]+1 == scope.row.parentLength"
          >
            置底
          </el-button>
          <el-button
              type="text"
              size="mini"
              @click="goWhere(scope, true)"
              :disabled="scope.row.indexLine[scope.row.indexLine.length - 1] == 0"
          >
            上移
          </el-button>
          <el-button
              type="text"
              size="mini"
              @click="goWhere(scope, false)"
              :disabled="scope.row.indexLine[scope.row.indexLine.length - 1]+1 == scope.row.parentLength"
          >下移
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      forbid: false,
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 1519 弄",
          children: [
            {
              id: 31,
              date: "2016-05-01",
              name: "王小虎3-1",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              id: 36,
              date: "2016-05-01",
              name: "王小虎3-2",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              id: 37,
              date: "2016-05-01",
              name: "王小虎3-2",
              address: "上海市普陀区金沙江路 1519 弄",
              children: [
                {
                  id: 38,
                  date: "2016-05-01",
                  name: "王小虎3-2-1",
                  address: "上海市普陀区金沙江路 1519 弄",
                },
                {
                  id: 39,
                  date: "2016-05-01",
                  name: "王小虎3-2-2",
                  address: "上海市普陀区金沙江路 1519 弄",
                },
              ]
            },
          ],
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  mounted() {
    this.tableDataHandle(this.tableData, 'children')
  },
  methods: {
    goWhere(scrow, flag) {
      this.upAndDown(scrow.row.indexLine, flag, scrow.row)
      this.tableDataHandle(this.tableData, 'children')
    },
    // 上下移动
    upAndDown(target, flag, row) {
      let temTable
      if (target.length == 1) {
        temTable = this.tableData
      } else {
        temTable = this.getParent(target).children
      }
      let index = target[target.length - 1]
      if(flag === 1){ // 置顶
        temTable.splice(index, 1);
        temTable.unshift(row)
        return
      }
      if(flag === 0){
        temTable.splice(index, 1);
        temTable.push(row)
        return;
      }
      if (flag) { //上移
        let upData = temTable[index - 1]
        temTable.splice(index - 1, 1);
        temTable.splice(index, 0, upData);
      } else { //下移
        let downData = temTable[index + 1]
        temTable.splice(index + 1, 1);
        temTable.splice(index, 0, downData);
      }
    },

    // 精确到父亲,这里想不到合适的回调函数，直接写死了
    getParent(target) {
      switch (target.length) {
        case 1:
          return this.tableData
          break
        case 2:
          return this.tableData[target[0]]
          break
        case 3:
          return this.tableData[target[0]].children[target[1]]
          break
        case 4:
          return this.tableData[target[0]].children[target[1]].children[target[2]]
          break
        case 5:
          return this.tableData[target[0]].children[target[1]].children[target[2]].children[target[3]]
          break
        case 6:
          return this.tableData[target[0]].children[target[1]].children[target[2]].children[target[3]].children[target[4]]
          break
        case 7:
          return this.tableData[target[0]].children[target[1]].children[target[2]].children[target[3]].children[target[4]][target[5]]
          break
      }
    },


    // 数据处理
    tableDataHandle(arr, key, level = 0, indexLine = []) {
      level = level + 1
      arr.map((item, idx) => {
        item.level = level
        item.indexLine = Object.assign([], indexLine)
        item.indexLine.push(idx)
        item.parentLength = arr.length
        if (item[key]) {
          this.tableDataHandle(item[key], key, level, item.indexLine)
        }
      })
      return arr
    },
  },
};
</script>

<style scoped>
.move {
  display: inline-block;
  margin-right: 10px;
  color: #57a5fe;
}
</style>