开发指南101
平台上实现拖动排序的标准方案如下:
依托组件:
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,依次类推。