官网地址:Sortable.js中文网
使用方法:
1. npm安装
npm install sortablejs --save
2. 在组件中引入插件
import Sortable from "sortablejs";
3. 给要拖动的table加上id用来获取dom,记得加row-key,不然会有显示问题
4. 使用
// 拖拽
const setSort = () => {
const tbody = document.querySelector("#dragTable table tbody") as HTMLElement; // 获取要拖动的节点
new Sortable(tbody, {
animation: 150,
sort: true,
onEnd: (e: any) => {
const targetRow = tableData.splice(e.oldIndex, 1)[0];
tableData.splice(e.newIndex, 0, targetRow);
console.log(tableData);
}
});
};
onMounted(() => {
setSort();
});
官网配置项截图:
效果: