使用Vue3优雅地实现表格拖动排序
更新时间：2025年01月08日 08:22:57 作者：知否技术
在 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表格拖动排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue的mixin策略的相关资料，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-11-11
过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。下面这篇文章主要给大家介绍了关于vue.js中过滤器使用的相关资料，需要的朋友可以参考借鉴，下面来看看详细的介绍。2017-06-06
这篇文章主要介绍了vue自定义全局组件(自定义插件)的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了Vue3计算属性是如何实现的，对于任何包含响应式数据的复杂逻辑，我们都应该使用计算属性，更多相关内容需要的小伙伴可以参考一下2022-08-08
这篇文章主要为大家介绍了vue2从数据变化到视图变化之nextTick使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了vue通信方法EventBus的实现代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
在使用 Vue 构建的单页面应用中,页面的样式可能因为路由切换、组件加载顺序或样式的动态加载导致样式混乱,尤其是在复杂的应用中,随着页面的切换或者刷新,按钮、文字、布局等可能表现出不同的样式,所以本文给大家介绍了Vue页面加载后和刷新后的样式差异问题的解决方案2025-01-01
Vue Baidu Map之自定义点图标bm-marker的示例
这篇文章主要介绍了Vue Baidu Map之自定义点图标bm-marker,文中给大家介绍了vue-baidu-api地图标记点（自定义标记图标），设置标记点的优先级问题，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Vue仿Bibibili首页,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要介绍了Vue——前端生成二维码的示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
最新评论