木灵鱼儿

木灵鱼儿

阅读：2453

最后更新：2021/01/22/ 14:30:43

element table表格使用sortablejs插件进行拖拽

在表格里面进行拖拽，肯定没法用组件的形式，因为会破坏table的结构，所以只能从 dom上入手。

安装插件

yarn add sortablejs  --dev

中文说明站点：sortablejs中文网

使用

<template>
  <el-table :data="tbody" id="appTable" row-key="id">
    ...
  </el-table>
</template>
<script>
import Sortable from "sortablejs/modular/sortable.core.esm.js";
export default {
  data(){
    return {
      tbody:[]; //表格数据
    }
  },
  methods: {
    //初始化拖拽表格
    initSortable() {
      this.$nextTick(() => {
        const appTable = document.querySelector(
          "#appTable .el-table__body>tbody"
        );
        this.$appTable = Sortable.create(appTable, {
          animation: 150,
          ghostClass: "sortable-ghost",
          onEnd: (event) => {
            const oldItem = this.tbody[event.oldIndex];
            this.tbody.splice(event.oldIndex, 1);
            this.tbody.splice(event.newIndex, 0, oldItem);
            //保存拖拽排序api
            //自己写业务请求，idArr得到了拖拽后的数组id顺序
            //const idArr = this.tbody.map((item) => item.id);
          },
        });
        //阻止火狐拖拽新建新页面
        document.body.addEventListener("drop", this.preventDrop, false);
      });
    },
    //阻止默认drop事件
    preventDrop(event) {
      event.preventDefault();
      event.stopPropagation();
    },
    //销毁拖拽表格
    destroySortable() {
      if (this.$appTable) this.$appTable.destroy();
      document.body.removeEventListener("drop", this.preventDrop, false);
    },
  },
  created() {
    //初始化拖拽表格
    this.initSortable();
  },
  beforeDestroy() {
    //销毁拖拽表格
    this.destroySortable();
  },
}
</script>

拖拽后的数据获取也很简单，分三步：

onEnd事件表示拖拽结束后，他有一个对象，该对象有两个属性我们可以用到，一个是oldIndex，表示被拖拽的元素之前的index下标，newIndex则是被拖拽的元素新的index下标。

那么开始干：

  1. 从tbody源数据中先拿到一份被拖拽的数据对象，命名为oldItem
  2. 从tbody源数据中删除被拖拽的数据对象
  3. tbody源数据从newIndex位置插入一份oldItem

完事，这样我们的源数据始终和拖拽的可视化数据保持一致，所以我们可以直接遍历源数据得到一份最新的基于当前拖拽顺序的id数组，当然也可以是其他，看tbody里面有啥。

注意：

  1. 一定要设置row-key="id"，否则拖拽后会莫名其妙
  2. 火狐浏览器拖拽默认会新建新页面，解决这个问题就是阻止body的默认拖拽行为。

以上就是使用方式了。顺带一提querySelector的兼容性还是ok的，放心使用。

文章分类 vue 项目实战
文章标签 排序拖拽elementtablesortablejs
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 1获得阅读 2453

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 1
文章被阅读 2453

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译

目录树