vue+sortable实现表格拖拽

vue+sortable实现表格拖拽

前言：

支持 vue3.0
支持表格拖拽
支持自定义拖拽
sortable官网

一、下载 sortable

npm install sortablejs --save

二、引入 sortable

import Sortable from “sortablejs”

三、使用

1. 找到自己 ui 框架表格body的class，我这里是 ant-table-tbody
   
2. 在表格渲染之后执行下方代码

<a-table :columns="tableHead" :data-source="tableData">
  <div slot="drag">
    <span class="drag">拖动</span>
  </div>
</a-table>

var el = document.querySelector(".ant-table-tbody");
new Sortable(el, {
    
    
    animation: 200, // 拖动动画
    handle: ".drag",  // 点击class为drag的容器才拖动
    forceFallback: true, // 拖动时移动鼠标
    onEnd: function (evt) {
    
    
        const top = scrollEl.scrollTop;
        // this.tableData 是我的表格数据
        this.tableData.splice(evt.newIndex,0,this.tableData.splice(evt.oldIndex, 1)[0]);
        var newArray = this.tableData.slice(0);
        this.tableData = [];
        this.$nextTick(function () {
    
    
          this.tableData = newArray;
        });
    },
});