vue element 树表格上移下移实现

<template>
  <div class="m-page">
    <el-table
      :data="tableData"
      style="width: 100%"
      ref="treeTable"
      row-key="id"
      border
      highlight-current-row
      :select-on-indeterminate="true"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="" width="55" align="center"> </el-table-column>

      <el-table-column
        prop="name"
        label="部门名称"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="leader"
        label="负责人"
        width="180"
      ></el-table-column>
      <el-table-column prop="memo" label="备注"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <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 {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: "1",
          leader: "张三",
          memo: "",
          children: [
            {
              id: 11,
              name: "1-1",
              leader: "王小虎",
              memo: "上海市普陀区金沙江路 1519 弄",
              children: [
                {
                  id: 14441,
                  name: "1-1-1",
                  leader: "王小虎",
                  memo: "上海市普陀区金沙江路 1519 弄",
                },
                {
                  id: 12224442,
                  name: "1-1-2",
                  leader: "王小虎",
                  memo: "上海市普陀区金沙江路 1519 弄",
                },
              ],
            },
            {
              id: 12222,
              name: "1-2",
              leader: "王小虎",
              memo: "上海市普陀区金沙江路 1519 弄",
            },
          ],
        },
        {
          id: 12,
          name: "2",
          leader: "张三",
          memo: "",
          children: [
            {
              id: 121,
              name: "2-1",
              leader: "王小虎",
              memo: "上海市普陀区金沙江路 1519 弄",
            },
            {
              id: 122,
              name: "2-2",
              leader: "王小虎",
              memo: "上海市普陀区金沙江路 1519 弄",
            },
            {
              id: 132,
              name: "3",
              leader: "张三",
              memo: "",
              children: [
                {
                  id: 1321,
                  name: "3-1",
                  leader: "王小虎",
                  memo: "上海市普陀区金沙江路 1519 弄",
                },
                {
                  id: 1322,
                  name: "3-2",
                  leader: "王小虎",
                  memo: "上海市普陀区金沙江路 1519 弄",
                },
              ],
            },
          ],
        },
      ],
    };
  },
  watch: {},
  created() {
    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.getParentData(this.tableData,row);
      }
      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);
      }
    },

    // 数据处理
    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;
    },

 // 精确到父亲
    getParentData(list,row){
      let children =[]
      let findele=(arr,data)=>{
        arr.forEach(item => {
          if(item.id==data.id){
            children=arr
          }else{
            if(item.children&&item.children.length){
              findele(item.children,data)
            }
          }
        });
      }
      findele(list,row)
      return children
    },

     
  },
};
</script>