el-table行移动下一行上一行

1、html部分

<el-table
  :data="tableData"
  :fit="true"
  :cell-style="cellStyle"
  border
  class="ccui-multifunctional-table"
  @header-dragend="tableTitleWidth"
  @row-click="handleRowClick"
  @selection-change="handleSelectionChange"
>
  <el-table-column
    label="序号"
    align="center"
    :width="$TW.sn"
    fixed
  >
    <template slot-scope="scope">
      <span>{{
        (pageNoCode - 1) * pageSizeCode + scope.$index + 1
      }}</span>
    </template>
  </el-table-column>
  <!-- <el-table-column type="selection" width="55" align="center" /> -->
  <template v-for="(table, index) in tableTheadOptions">
    <el-table-column
      :fixed="table.fixed || false"
      :key="index"
      :type="table.type"
      :label="table.label"
      :min-width="table.width"
      :prop="table.prop"
      :align="table.align || 'left'"
      :header-align="table.headerAlign || 'left'"
      show-overflow-tooltip
    >
      <template slot-scope="scope">
        <div v-if="table.prop == 'projectStageDict'">
          {{
            findNameByCode(
              scope.row.projectStageDict,
              projectStageDict
            )
          }}
        </div>
        <div v-else-if="table.prop == 'sourceIncomeCodeDict'">
          {{
            findNameByCode(
              scope.row.sourceIncomeCodeDict,
              projectStageDict
            )
          }}
        </div>
        <div v-else-if="table.prop == 'operation'">
            <!-- 主要代码 -->
          <el-button
            @click.native.prevent="
              deleteRow(scope.$index, scope.row, 'up')
            "
            type="text"
            size="small"
            >上移</el-button
          >
          <el-button
            @click.native.prevent="
              deleteRow(scope.$index, scope.row, 'down')
            "
            type="text"
            size="small"
            >下移</el-button
          >
        </div>
        <div v-else>{{ scope.row[table.prop] }}</div>
      </template>
    </el-table-column>
  </template>
</el-table>

2、javaScript部分

methods: {    
    // 上移下移
    deleteRow(index, e, type) {
      if (type === "up") {
        if (index === 0) {
          return this.$message.warning("已经是第一条，不可上移");
        }
        // 在上一项插入该项
        this.tableData.splice(index - 1, 0, this.tableData[index]);
        // 删除后一项
        this.tableData.splice(index + 1, 1);
        this.getmoveUpAndMoveDown(e, 0);
      } else if (type === "down") {
        if (index === this.tableData.length - 1) {
          return this.$message.warning("已经是最后一条，不可下移");
        }
        // 在下一项插入该项
        this.tableData.splice(index + 2, 0, this.tableData[index]);
        // 删除前一项
        this.tableData.splice(index, 1);
        this.getmoveUpAndMoveDown(e, 1);
      }
    },

    // 请求接口
    getmoveUpAndMoveDown(row, status) {
        // 需要的参数
      const params = {
        sn: row.sn,
        id: row.id,
        reserve1: row.reserve1,
        moveUpAndDown: status
      };
      moveUpAndMoveDown(params).then(res => {
        if (res.status === 200) {
          let { code, message } = res.data;
          if (code === "0") {
            // 请求列表接口 刷新列表
            this.queryList({});
          } else {
            this.$message.error(message);
          }
        }
      });
    },
}，