【vue3优雅的表格拖动】

<template>
  <div>
    <el-card style="width: 30%">
      <el-table
        ref="tableRef"
        border
        :data="tableData"
        :row-key="(row) => row.id"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column prop="id" label="id" width="100"> </el-table-column>
        <el-table-column prop="age" label="年龄" width="100"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import Sortable from "sortablejs";
import { ref, onMounted, onBeforeUnmount } from "vue";

const tableRef = ref();
// 表格数据
const tableData = ref([
  { id: 110, age: 20, name: "李白" },
  { id: 120, age: 21, name: "杜甫" },
  { id: 130, age: 22, name: "白居易" },
  { id: 130, age: 27, name: "知否君" },
]);
// 组件挂载之后执行
onMounted(() => {
  onSortableRow();
  onSortableColumn();
});
const sortableRow = ref(null);
const sortableColumn = ref(null);
// 拖动表格行
const onSortableRow = () => {
  sortableRow.value = Sortable.create(
    tableRef.value.$el.querySelector(".el-table__body-wrapper tbody"),
    {
      animation: 150,
      onEnd: ({ newIndex, oldIndex }) => {
        // 获取新的行位置
        const currRow = tableData.value.splice(oldIndex, 1)[0];
        // 重新排列行位置
        tableData.value.splice(newIndex, 0, currRow);
      },
    }
  );
};
// 拖动表格列
const onSortableColumn = () => {
  sortableColumn.value = Sortable.create(
    tableRef.value.$el.querySelector(".el-table__header-wrapper thead tr"),
    {
      animation: 150,
      onEnd: ({ newIndex, oldIndex }) => {
        // 1.获取表格列
        const table = tableRef.value;
        const oldColumns = table.store.states.columns;
        // 2. 重新排列列的顺序
        const newColumns = [...oldColumns.value];
        const movedColumn = newColumns.splice(oldIndex, 1)[0];
        newColumns.splice(newIndex, 0, movedColumn);
        oldColumns.value = newColumns;
      },
    }
  );
};
// 销毁
onBeforeUnmount(() => {
  if (sortableRow.value) {
    sortableRow.value.destroy();
    sortableRow.value = null;
  }
  if (sortableColumn.value) {
    sortableColumn.value.destroy();
    sortableColumn.value = null;
  }
});
</script>

<style scoped></style>