vue3 eltable 数据向上移动/向下移动

分为两种情况：

(一)在后台写接口，手动更改排序字段

@Override
    public void updateUpSorNum(long id) {
        RepairBaseDescripDO repairBaseDescripDO = repairBaseDescripMapper.selectById(id);
        int AfterNum = 0;
        int beforeNum = 0;
        beforeNum = repairBaseDescripDO.getSortNum();
        AfterNum = repairBaseDescripDO.getSortNum() + 1;
        QueryWrapper<RepairBaseDescripDO> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("sort_num",AfterNum).eq("head_id",repairBaseDescripDO.getHeadId());
        RepairBaseDescripDO repairBaseDescripDo = repairBaseDescripMapper.selectOne(queryWrapper);
        if (repairBaseDescripDo != null){
            repairBaseDescripDO.setSortNum(repairBaseDescripDo.getSortNum());
        }else {
            throw exception(ALL,"这条数据是最顶级，不能继续向上移动");
        }
        repairBaseDescripDo.setSortNum(beforeNum);
        repairBaseDescripMapper.updateById(repairBaseDescripDo);
        repairBaseDescripMapper.updateById(repairBaseDescripDO);
    }

    @Override
    public void updateDownSorNum(long id) {
        RepairBaseDescripDO repairBaseDescripDO = repairBaseDescripMapper.selectById(id);
        int AfterNum = 0;
        int beforeNum = 0;
        beforeNum = repairBaseDescripDO.getSortNum();
        AfterNum = repairBaseDescripDO.getSortNum() - 1;
        QueryWrapper<RepairBaseDescripDO> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("sort_num",AfterNum).eq("head_id",repairBaseDescripDO.getHeadId());
        RepairBaseDescripDO repairBaseDescripDo = repairBaseDescripMapper.selectOne(queryWrapper);
        if (repairBaseDescripDo != null){
            repairBaseDescripDO.setSortNum(repairBaseDescripDo.getSortNum());
        }else {
            throw exception(ALL,"这条数据是最末级，不能继续向下移动");
        }
        repairBaseDescripDo.setSortNum(beforeNum);
        repairBaseDescripMapper.updateById(repairBaseDescripDo);
        repairBaseDescripMapper.updateById(repairBaseDescripDO);
    }

(二)在前端移动索引后保存时按照顺序存到数据库

<ContentWrap>
      <el-form ref="formRef" :model="formData" :rules="formRules" :inline-message="true">
      <el-table
        :data="formData.mouldData"
        border
        stripe
        highlight-current-row
        :row-class-name="tableRowClassName"
        :cell-style="{ 'text-align': 'center' }"
        @row-click="handleRowClick"
        :header-cell-style="{
          background: '#b7babd',
          color: '#1e1f22',
          height: '35px',
          'text-align': 'center'
        }"
        style="width: 100%;max-height:45vh;overflow-y: auto"
        max-height="600"

      >
        <el-table-column label="序号" label-width="100px" type="index" />
        <el-table-column label="评价项目">
          <template #header> 评价项目</template>
          <template #default="scope">
            <el-form-item
              size="small"
              :prop="'mouldData.[' + scope.$index + '].evaluationProject'"
              :rules="formRules.evaluationProject"
              style="margin-top: 15px"
              v-show="scope.row.show"
            >
              <el-input v-model="scope.row.evaluationProject" size="large" @input="handleInput(scope.row)"/>
            </el-form-item>
            <span v-show="!scope.row.show">{{ scope.row.evaluationProject }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px" v-if="viewStats == '编辑'">
          <template #default="scope">
            <el-button
              v-if="scope.row.rowState == 0"
              link
              type="primary"
              @click="handleOpenFormClick(scope.$index, scope.row, '保存')"
            >
              确认
            </el-button>
            <el-button
              v-if="scope.row.rowState == 0"
              link
              type="primary"
              @click="handleOpenFormClick(scope.$index, scope.row, '取消')"
            >
              取消
            </el-button>
            <el-button
              v-if="scope.row.rowState != 0"
              type="primary"
              link
              @click="handleOpenFormClick(scope.$index, scope.row, '编辑')"
            >编辑
            </el-button>
            <el-button
              v-if="scope.row.rowState != 0"
              link
              type="primary"
              @click="handleOpenFormClick(scope.$index, scope.row, '删除')"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-form>

const init = async () => {
  formData.value.mouldData = []
  versionArray.value = []
  // 获取所有版本号列表
  versionArray.value = versionList
   // 查所有数据列表并根据状态来决定是否是可以编辑的
  let data = await gettableAPi.getTableList(versionType.value)
  if (data) {
    formData.value.mouldData = data
    isFirst.value = false
    // const state = mouldData.value[0]['state']
    const state = formData.value.mouldData[0]?.state
    switch (state) {
      case '0':
        viewStats.value = '编辑'
        showUpgradeMouldButton.value = false
        break
      case '1':
        viewStats.value = '查看'
        showUpgradeMouldButton.value = true // 可升级
        break
      case '3':
        viewStats.value = '查看'
        showUpgradeMouldButton.value = false
        break
      default:
        viewStats.value = '查看'
        showUpgradeMouldButton.value = false
        break
    }
  }
}

const formData = ref({ mouldData: [] }) // 模板数据

// 降序
const handleDescendingOrder = () => {
  console.log('row', rowIndex.value)
  if (rowIndex.value == formData.value.mouldData.length - 1) {
    message.warning('已经是最后一条了')
    return
  }
  let data = formData.value.mouldData
  let temp = formData.value.mouldData[rowIndex.value]
  data[rowIndex.value] = data[rowIndex.value + 1]
  data[rowIndex.value + 1] = temp
  rowIndex.value = rowIndex.value + 1
  formData.value.mouldData = data
}


// 升序
const handleAscendingOrder = () => {
  if (rowIndex.value === 0) {
    message.warning('已经是第一条了')
    return
  }
  console.log('row', rowIndex.value)
  let data = formData.value.mouldData
  let temp = formData.value.mouldData[rowIndex.value]
  data[rowIndex.value] = data[rowIndex.value - 1]
  data[rowIndex.value - 1] = temp
  rowIndex.value = rowIndex.value - 1
  formData.value.mouldData = data
}