使用Vue3優(yōu)雅地實(shí)現(xiàn)表格拖動(dòng)排序

更新時(shí)間：2025年01月08日 08:22:57 作者：知否技術(shù)

在?Vue.js?中主要通過(guò)第三方庫(kù)實(shí)現(xiàn)表格拖動(dòng)排序功能,其中最常用的庫(kù)是?SortableJS,下面我們就來(lái)看看如何使用SortableJS實(shí)現(xiàn)表格拖動(dòng)排序吧

1. 安裝 sortablejs

npm i sortablejs --save

2. 初始化表格數(shù)據(jù)

這里使用 ElementPlus 作為前端組件庫(kù)

注意要給 el-table 綁定 row-key 屬性，并設(shè)置 ref。

  <el-table
    ref="tableRef"
    border
    :data="tableData"
    :row-key="(row) => row.id"
    style="width: 100%"
  >
    <el-table-column type="index" label="序號(hào)" 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>

js 部分

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
const tableRef = ref();
// 表格數(shù)據(jù)
const tableData = ref([
  { id: 110, age: 20, name: "李白" },
  { id: 120, age: 21, name: "杜甫" },
  { id: 130, age: 22, name: "白居易" },
  { id: 130, age: 27, name: "知否君" },
]);
</script>

3. 使用 sortablejs

3.1 導(dǎo)入 sortablejs

import Sortable from "sortablejs";

3.2 使用 sortablejs 創(chuàng)建拖動(dòng)表格方法

const sortableRow = ref(null);
const sortableColumn = ref(null);
// 拖動(dòng)表格行
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);
      },
    }
  );
};
// 拖動(dòng)表格列
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;
      },
    }
  );
};

3.3 在周期函數(shù)中調(diào)用方法

// 組件掛載之后執(zhí)行
onMounted(() => {
  onSortableRow();
  onSortableColumn();
});

3.4 銷(xiāo)毀實(shí)例

// 銷(xiāo)毀
onBeforeUnmount(() => {
  if (sortableRow.value) {
    sortableRow.value.destroy();
    sortableRow.value = null;
  }
  if (sortableColumn.value) {
    sortableColumn.value.destroy();
    sortableColumn.value = null;
  }
});

4. 完整代碼

<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="序號(hào)" 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();
// 表格數(shù)據(jù)
const tableData = ref([
  { id: 110, age: 20, name: "李白" },
  { id: 120, age: 21, name: "杜甫" },
  { id: 130, age: 22, name: "白居易" },
  { id: 130, age: 27, name: "知否君" },
]);
// 組件掛載之后執(zhí)行
onMounted(() => {
  onSortableRow();
  onSortableColumn();
});
const sortableRow = ref(null);
const sortableColumn = ref(null);
// 拖動(dòng)表格行
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);
      },
    }
  );
};
// 拖動(dòng)表格列
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;
      },
    }
  );
};
// 銷(xiāo)毀
onBeforeUnmount(() => {
  if (sortableRow.value) {
    sortableRow.value.destroy();
    sortableRow.value = null;
  }
  if (sortableColumn.value) {
    sortableColumn.value.destroy();
    sortableColumn.value = null;
  }
});
</script>

<style scoped></style>

效果圖