51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

Vue3 + element Plus + SortableJs实现表格行拖拽排序

前言 {#前言}

Sortable.js是一款优秀的js拖拽库,支持ie9及以上版本ie浏览器和现代浏览器,也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库,如Bootstrap、Element UI。你可以用来拖拽div、table等元素。

sortable.js中文文档 :https://sortablejs.com/

操作 {#操作}

安装 {#安装}

npm install sortablejs --save

实操 {#实操}

Vue页面引入组件

import Sortable from 'sortablejs';

el-table中只需要加一个 ( row-key="XX" ) 即可,row-key对应的必须是表格数据唯一键值(比如id)

使用sortablejs

Sortable.create(参数1,参数2)

参数1:可拖动的标签区域,(注意:是你拖拽元素的父级标签,要从解析过的浏览器里看,不能单纯从我们写的代码结构看,因为我们用的el-table是封装的组件。如果这个选择不对的话就拖动不了),不同的版本的组件这里的类名很有可能不一样,视情况修改,保证能定位到就行了

参数2:SortableJs的配置对象,可参考上面SortableJs中文官网

我这里的使用为:

onMounted(() => {
    getList();
    nextTick(() => {
        initDropTable();
    });
});

const initDropTable = () => { const sortable = Sortable.create( document.querySelector('.el-table__body-wrapper tbody'), { animation: 500, sort: true, // 拖拽结束后触发 onEnd: (event) => { // 拖动前的索引 let oldIndex = event.oldIndex; // 拖动后的索引 let newIndex = event.newIndex; if (oldIndex === newIndex) { return; } // 拖动项的id let moveItemId = pieceList.value[oldIndex].id; // 拖动项的原始排序 let oldOrder = pieceList.value[oldIndex].sortNum; // 拖动的目标项的排序 let newOrder = pieceList.value[newIndex].sortNum; // 构建要发送的数据 const data = { oldIndex: oldIndex, newIndex: newIndex, moveItemId: moveItemId, oldOrder: oldOrder, newOrder: newOrder, }; // 发送请求到后端 updatePieceOrder(data).then(response => { // 重新获取列表以更新显示 getList(); }).catch(error => { }); },

    },
);

};


Java后台

这里其实没必要传递这么多参数的,我传递这些是便于调试

具体逻辑就是判断是向上还是向下拖动,然后处理新旧排序值之间的那部分数据的排序值的变化,向上拖动那部分数据排序值+1,反之-1,只会影响新旧排序值之间的数据,其他的不会影响

/**
 * 列表拖动排序
 *
 * @param updateOrder
 */
@Transactional
public void updatePieceOrder(UpdateOrderDTO updateOrder) {
    Integer moveItemId = updateOrder.getMoveItemId();
    Integer oldIndex = updateOrder.getOldIndex();
    Integer newIndex = updateOrder.getNewIndex();
    // 获取排序值
    Integer oldOrder = updateOrder.getOldOrder();
    Integer newOrder = updateOrder.getNewOrder();
<span class="hljs-comment">// 如果 oldIndex < newIndex,表示向下移动</span>
<span class="hljs-keyword">if</span> (oldIndex < newIndex) {
    <span class="hljs-comment">// 更新在 oldIndex 和 newIndex 之间的所有项的 sortOrder</span>
    pieceMapper.decrementSortOrderInRange(oldOrder, newOrder);
} <span class="hljs-keyword">else</span> {
    <span class="hljs-comment">// 如果 oldIndex > newIndex,表示向上移动</span>
    pieceMapper.incrementSortOrderInRange(newOrder, oldOrder);
}

<span class="hljs-comment">// 更新 oldId 的排序值</span> pieceMapper.updateSortOrder(moveItemId, newOrder);

}


赞(1)
未经允许不得转载:工具盒子 » Vue3 + element Plus + SortableJs实现表格行拖拽排序