Vue3+element-plus 表格实现上移下移排序

<!--
 * @Description: 
 * @Author: Ran junlin
 * @Date: 2022-02-18 10:16:09
 * @LastEditTime: 2022-02-18 14:48:10
 * @LastEditors: Ran junlin
-->
<template>
  <el-page-header content="生成试卷" @back="goBack" />
  <el-divider></el-divider>
  <transition name="myHello" appear mode="in-out"> 
    <el-table :data="newsList" class="TAB">
    <el-table-column type="index" label="序号" width="50"></el-table-column>
    <el-table-column
      prop="title"
      label="文章标题"
      min-width="300"
    ></el-table-column>
    <el-table-column label="操作(素材排序)">
      <template #default="scope">
        <el-button type="text" @click.stop="sortUp(scope.$index, scope.row)"
          >向上↑
        </el-button>
        <el-button type="text" @click.stop="sortDown(scope.$index, scope.row)"
          >向下↓</el-button
        >
        <el-button type="text" @click.stop="sortTop(scope.$index, scope.row)"
          >置顶</el-button
        >
        <el-button type="text" @click.stop="sortEnd(scope.$index, scope.row)"
          >最下</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  </transition>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { Edit, Download } from '@element-plus/icons-vue';
import router from '../router/index';
import {
  ElTableColumn,
  ElTable,
  ElDivider,
  ElButtonGroup,
  ElButton,
  ElIcon,
  ElPageHeader,
} from 'element-plus';
import { DataList } from '../types/DataList';
export default defineComponent({
  name: 'List',
  components: {
    ElTableColumn,
    ElDivider,
    ElButtonGroup,
    ElButton,
    Edit,
    Download,
    ElIcon,
    ElPageHeader,
    ElTable,
  },
  setup(props, t) {
    console.log(props, t);
    const state = reactive<{ newsList: DataList[] }>({
      newsList: [
        {
          id: 1001,
          title: '第一周考试',
          time: '2022-3-12',
          desc: 'Tom committed 2022-3-12 20:46',
          Publish: 3,
        },
        {
          id: 1002,
          title: '第二周考试',
          time: '2022-3-22',
          desc: 'Tom committed 2022-3-22 20:46',
          Publish: 3,
        },
        {
          id: 1003,
          title: '第三周考试',
          time: '2022-3-31',
          desc: 'Tom committed 2022-3-31 20:46',
          Publish: 3,
        },
        {
          id: 1004,
          title: '第四周考试',
          time: '2022-4-10',
          desc: 'Tom committed 2022-4-10 20:46',
          Publish: 3,
        },
        {
          id: 1005,
          title: '第五周考试',
          time: '2022-4-22',
          desc: 'Tom committed 2022-4-22 20:46',
          Publish: 3,
        },
        {
          id: 6,
          title: '第六周考试',
          time: '2022-4-22',
          desc: 'Tom committed 2022-4-22 20:46',
          Publish: 3,
        },
        {
          id: 7,
          title: '第七周考试',
          time: '2022-4-22',
          desc: 'Tom committed 2022-4-22 20:46',
          Publish: 3,
        },
        {
          id: 8,
          title: '第八周考试',
          time: '2022-4-22',
          desc: 'Tom committed 2022-4-22 20:46',
          Publish: 3,
        },
        {
          id: 9,
          title: '第九周考试',
          time: '2022-4-22',
          desc: 'Tom committed 2022-4-22 20:46',
          Publish: 3,
        },
        {
          id: 10,
          title: '第十周考试',
          time: '2022-4-22',
          desc: 'Tom committed 2022-4-22 20:46',
          Publish: 3,
        },
      ],
    });
    function swapArr(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      console.log(arr);
      return arr;
    }
    // 上移按钮
    const sortUp = (index) => {
      if (index === 0) {
        alert('已经是列表中第一个素材');
      } else {
        state.newsList = swapArr(state.newsList, index, index - 1);
      }
    };
    // 上移按钮
    const sortDown = (index) => {
      if (index === state.newsList.length - 1) {
        alert('已经是列表中第一个素材');
      } else {
        state.newsList = swapArr(state.newsList, index, index + 1);
      }
    };
    // sortTop
    const sortTop = (index) => {
      if (index === 0) {
        alert('已经是列表中第一个素材');
      } else {
        state.newsList = swapArr(state.newsList, index, 0);
      }
    }; // sortTop
    const sortEnd = (index) => {
      if (index === state.newsList.length - 1) {
        alert('已经是列表中最后一个素材');
      } else {
        state.newsList = swapArr(
          state.newsList,
          index,
          state.newsList.length - 1
        );
      }
    };
    const goBack = () => {
      history.back();
    };
    return {
      ...toRefs(state),
      sortUp,
      goBack,
      sortDown,
      sortTop,
      sortEnd,
    };
  },
});
</script>
<style scoped lang="scss">
.card-content {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.TAB {
  width: 80%;
  margin: 0 auto;
}
.right-bnt {
  width: 15%;
}
.el-card {
  margin-bottom: 10px !important;
}
.demio {
  margin: 20px auto;
  width: 80%;
  height: 300px;
  line-height: 300px;
  text-align: center;
  font-size: 50px;
  background-color: rgb(94, 245, 182);
}

.myHello-enter-active {
  animation: showHello 0.5s linear;
}
.myHello-leave-active {
  animation: showHello 0.5s linear reverse;
}
@keyframes showHello {
  from {
    transform: translateX(-100%);
    transform: scaleX(0.2);
  }
  to {
    transform: translateX(-100%);
    transform: scaleX(1.1);
  }
}
</style>