vue+sortable实现表格拖拽
前言:
支持 vue3.0
支持表格拖拽
支持自定义拖拽
sortable官网
一、下载 sortable
npm install sortablejs --save
二、引入 sortable
import Sortable from “sortablejs”
三、使用
- 找到自己 ui 框架表格body的class,我这里是 ant-table-tbody
- 在表格渲染之后执行下方代码
<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;
});
},
});