使用Vue3優(yōu)雅地實現(xiàn)表格拖動排序
更新時間：2025年01月08日 08:22:57 作者：知否技術
在?Vue.js?中主要通過第三方庫實現(xiàn)表格拖動排序功能,其中最常用的庫是?SortableJS,下面我們就來看看如何使用SortableJS實現(xiàn)表格拖動排序吧
在 Vue.js 中主要通過第三方庫實現(xiàn)表格拖動排序功能，其中最常用的庫是 SortableJS。
1. 安裝 sortablejs
npm i sortablejs --save
2. 初始化表格數(shù)據(jù)
這里使用 ElementPlus 作為前端組件庫
注意要給 el-table 綁定 row-key 屬性，并設置 ref。
<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>
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 導入 sortablejs
import Sortable from "sortablejs";
3.2 使用 sortablejs 創(chuàng)建拖動表格方法
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;
},
}
);
};
3.3 在周期函數(shù)中調(diào)用方法
// 組件掛載之后執(zhí)行
onMounted(() => {
onSortableRow();
onSortableColumn();
});
3.4 銷毀實例
// 銷毀
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="序號" 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);
// 拖動表格行
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>效果圖
到此這篇關于使用Vue3優(yōu)雅地實現(xiàn)表格拖動排序的文章就介紹到這了,更多相關Vue3表格拖動排序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue的mixin策略的相關資料，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下2020-11-11
過濾器是一個通過輸入數(shù)據(jù)，能夠及時對數(shù)據(jù)進行處理并返回一個數(shù)據(jù)結果的簡單函數(shù)。下面這篇文章主要給大家介紹了關于vue.js中過濾器使用的相關資料，需要的朋友可以參考借鑒，下面來看看詳細的介紹。2017-06-06
這篇文章主要介紹了vue自定義全局組件(自定義插件)的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Vue3計算屬性是如何實現(xiàn)的，對于任何包含響應式數(shù)據(jù)的復雜邏輯，我們都應該使用計算屬性，更多相關內(nèi)容需要的小伙伴可以參考一下2022-08-08
vue2從數(shù)據(jù)變化到視圖變化之nextTick使用詳解
這篇文章主要為大家介紹了vue2從數(shù)據(jù)變化到視圖變化之nextTick使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了vue通信方法EventBus的實現(xiàn)代碼，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
在使用?Vue?構建的單頁面應用中,頁面的樣式可能因為路由切換、組件加載順序或樣式的動態(tài)加載導致樣式混亂,尤其是在復雜的應用中,隨著頁面的切換或者刷新,按鈕、文字、布局等可能表現(xiàn)出不同的樣式,所以本文給大家介紹了Vue頁面加載后和刷新后的樣式差異問題的解決方案2025-01-01
Vue?Baidu?Map之自定義點圖標bm-marker的示例
這篇文章主要介紹了Vue?Baidu?Map之自定義點圖標bm-marker,文中給大家介紹了vue-baidu-api地圖標記點（自定義標記圖標），設置標記點的優(yōu)先級問題，結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue仿Bibibili首頁,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
這篇文章主要介紹了Vue——前端生成二維碼的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12