Vue3+ant-design-vue 表格实现上移下移排序 和 Vue3+element-plus 表格实现上移下移排序

Vue3+ant-design-vue 表格实现上移下移排序

 <template>
  <a-table id="mytb" :dataSource="uistate.list" :columns="columns" />
  </template>

<script lang='ts' setup>

// 利用ant-design-vue
import { dataSource, columns } from './helper';
import Sortable from 'sortablejs';
import { message } from 'ant-design-vue';


onMounted(() => {
  //拖拽排序
  const mytb = document.querySelector('#mytb tbody');
  new Sortable(mytb, {
    handle: '.ant-table-row',
    animation: 150,
    ghostClass: 'blue-background-class',
    sort: true,
    onUpdate(evt) {
      const name = evt.item.querySelector('td').innerText;
      console.log(evt, '拖动数据', name);
      // message.success(`${name}：从位置${evt.oldIndex + 1}挪到${evt.newIndex + 1}`);
    },
  });
});
</script>

helper.js

export const dataSource =  [
  {
    key: "1",
    name: "张三",
    age: 32,
    address: "西湖区湖底公园1号"
  },
  {
    key: "2",
    name: "胡彦祖",
    age: 42,
    address: "西湖区湖底公园2号"
  },
  {
      key: "3",
      name: "李四",
      age: 22,
      address: "西湖区湖底公园3号"

  }
  
];

export const columns =  [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "住址",
    dataIndex: "address",
    key: "address"
  },
]

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

<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>