1634021177543.jpg
需求: 拖动表格进行排序，把最终的表格顺序传递给后端
这里主要用到的是 sortablejs，如果你想了解更多，可以 👉 参考这篇文章
👍或者想实现排序或者跨列表拖拽可以参考这边文章~~~ vuedraggable<跨列表拖拽>
使用
npm install sortablejs --save
/** 此处省略了element-ui表格的相关代码 */
...
import Sortable from 'sortablejs'
...
mounted() {
this.$nextTick(() => {
this.rowDrop()
})
}
...
/** 行拖拽方法 */
rowDrop() {
// 获取到element-ui封装的表格标签
const tbody = document.querySelector(' .el-table__body-wrapper tbody');
const _this = this;
Sortable.create(tbody, {
animation: 180,
delay: 0,
onEnd({
newIndex,
oldIndex
}) {
const currRow = _this.tableData.splice(oldIndex, 1)[0];
_this.tableData.splice(newIndex, 0, currRow);
},
});
},
可能对你有帮助
1.如果遇到拖动完，表格样式并没有更新，数据缺更新的话，可以尝试在 element-ui 的表格组件加上 row-key试下;
2.vue --- 作用域插槽;
3.其他的拖拽方式
4.vuedraggable<跨列表拖拽>
