开发指南101

百科知识2025-04-273

平台上实现拖动排序的标准方案如下:

依托组件:

SortableJS

界面元素:

             

       --其他列

                               

      用el-table展示数据,最后一列显示拖动图标。其实拖动图标只是起个提示作用。点击行内即可拖动。

      核心处理:

      this.oldsortData = this.sortlist.map(v => v.itemID);       this.newsortData = this.oldsortData.slice();

      this.sortable = Sortable.create(el, {         animation: 300,         ghostClass: "sortable-ghost",         setData: function(dataTransfer) {           dataTransfer.setData("Text", "");         },         onEnd: evt => {           const tempIndex = this.newsortData.splice(evt.oldIndex, 1)[0];           this.newsortData.splice(evt.newIndex, 0, tempIndex);           this.newsortDataString = this.newsortData.join();         }       });

newsortDataString为拖动后id的序列串,将这个串返回后台接口调整顺序即可

后台接口一般处理方案,就是生成一段批处理sql,就是按newsortDataString的id顺序进行赋值操作,例如第一个赋值001,依次类推。