Vue3中优雅地实现表格拖动排序功能

文章目录

  • 1. 安装 sortablejs
  • 2. 初始化表格数据
  • 3. 使用 sortablejs
    • 3.1 导入 sortablejs
    • 3.2 使用 sortablejs 创建拖动表格方法
    • 3.3 在周期函数中调用方法
    • 3.4 销毁实例
  • 4. 完整代码

Vue3中优雅地实现表格拖动排序功能_第1张图片
在 Vue.js 中主要通过第三方库实现表格拖动排序功能,其中最常用的库是 SortableJS。

1. 安装 sortablejs

npm i sortablejs --save

2. 初始化表格数据

这里使用 ElementPlus 作为前端组件库

注意要给 el-table 绑定 row-key 属性,并设置 ref。

 <el-table
    ref

你可能感兴趣的:(Vue知识学习及项目开发实践,Vue3,表格拖动排序功能)