最近在写后台管理系统时，遇到一个需求，就是要实现表格的排序。

就是拖动某一行数据，放在指定位置，然后保存的时候根据最终的排序来处理生产单顺序字段。

参考大神的链接：vue-实现拖拽排序功能：https://juejin.cn/post/6909287804510371847

直接上代码：

1.html代码部分

<a-spin :spinning="loading" class="handleEditOrderCls">
      <ul
        class="list"
        style="background:#efefef;line-height:40px;margin-bottom:0px;width:calc(100% - 18px);"
      >
        <li class="list-item">
          <span style="flex:1;">生产单顺序</span>
          <span>产品信息</span>
          <span>交期信息</span>
          <span>剩余交期</span>
        </li>
      </ul>
      <transition-group name="drag" class="list listWrap" tag="ul">
        <li
          @dragenter="dragenter($event, index)"
          @dragover="dragover($event, index)"
          @dragstart="dragstart(index)"
          draggable
          v-for="(record, index) in groupList"
          :key="index"
          class="list-item"
        >
          <span style="flex:1;">
            {{ record.productionPriority }}
          </span>
          <span>
            编号：{{ record.productNO'}}<br />
            名称：{{ record.productName }}
          </span>
          <span>
            交期：{{ record.deliveryTime }}
            <br />
            工程：{{ record.actCompleteTime }}
          </span>
          <span>
            剩余天数：{{ record.days }}天
          </span>
        </li>
      </transition-group>
    </a-spin>
```
#  2.`script`部分代码
```js
data() {
    return {
      loading: false,
      groupList: [],
      dragIndex: '',
      enterIndex: '',
    };
  },
  methods: {
    dragstart(index) {
      this.dragIndex = index;
    },
    dragenter(e, index) {
      e.preventDefault();
      // 避免源对象触发自身的dragenter事件
      if (this.dragIndex !== index) {
        const moving = this.groupList[this.dragIndex];
        this.groupList.splice(this.dragIndex, 1);
        this.groupList.splice(index, 0, moving);
        // 排序变化后目标对象的索引变成源对象的索引
        this.dragIndex = index;
      }
    },
    dragover(e, index) {
      e.preventDefault();
    },
}
```
#  3.`css`部分代码
```css
.handleEditOrderCls .list {
  padding-left: 0;
  width: 100%;
}
.handleEditOrderCls .list.listWrap {
  max-height: 400px;
  overflow: auto;
}
.handleEditOrderCls .list li.redCls {
  background: red !important;
}
.handleEditOrderCls .list li {
  border: 1px solid #efefef;
  list-style: none;
  display: flex;
  align-items: center;
}
.handleEditOrderCls .list li span {
  width: 30%;
  text-align: left;
  padding: 5px 10px;
  box-sizing: border-box;
  display: inline-block;
  border-right: 1px solid #efefef;
}
.handleEditOrderCls .list li span:last-child {
  border: none;
}
.handleEditOrderCls .drag-move {
  transition: transform 0.3s;
}
.handleEditOrderCls .list-item {
  cursor: move;
  text-align: center;
}
```

完成！！！多多积累，多多收获！