使用Vue3优雅地实现表格拖动排序
作者:知否技术
在 Vue.js 中主要通过第三方库实现表格拖动排序功能,其中最常用的库是 SortableJS,下面我们就来看看如何使用SortableJS实现表格拖动排序吧
在 Vue.js 中主要通过第三方库实现表格拖动排序功能,其中最常用的库是 SortableJS。
1. 安装 sortablejs
npm i sortablejs --save
2. 初始化表格数据
这里使用 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(); // 表格数据 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 创建拖动表格方法
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 在周期函数中调用方法
// 组件挂载之后执行 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(); // 表格数据 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>
效果图
到此这篇关于使用Vue3优雅地实现表格拖动排序的文章就介绍到这了,更多相关Vue3表格拖动排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!