使用 sortablejs 实现拖拽排序
//引入 sortablejs
import Sortable from "sortablejs";
data() {
return {
list: [] // 列表数据
};
},
methods:{
//排序
async listSort() {
let ids = []; //排序好的id集合
this.list.forEach(item => ids.push(item.id));
//调排序接口
Api.sortBannerList({ ids: ids })
.then(() => {
this.$message.success("排序成功！");
})
.catch(err => {
this.$message.error(err.data.message);
});
},
//拖拽
rowDrop() {
//拖拽的元素
const tbody = document.querySelector(
"#banner-table .el-table__body-wrapper tbody"
);
Sortable.create(tbody, {
// 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动
handle: ".handle",
//结束拖拽
onEnd: async ({ newIndex, oldIndex }) => {
//重点 拖拽的当前行==>从列表里截取掉
const currentRow = this.list.splice(oldIndex, 1)[0];
//将截取掉的当前行 放到新的索引位置
this.list.splice(newIndex, 0, currentRow);
await this.listSort();
//排序完成后重新获取列表
this.fetchList();
}
});
},
}