Vue.Draggable+Element-ui Table实现拖拽

Vue.Draggable

GitHub地址：https://github.com/SortableJS/Vue.Draggable

Live Demos：https://sortablejs.github.io/Vue.Draggable/

Live Demos：https://david-desmaisons.github.io/draggable-example/

Install

yarn add vuedraggable

npm i -S vuedraggable

在需要实现拖拽功能的页面中直接引入

import Sortable from 'sortablejs'

<script>
	  // 拖动
      drag () {
     
        // 首先获取需要拖拽的dom节点
        const el1 = document.querySelectorAll('.edit-form-item .el-table__body-wrapper')[0].querySelectorAll('table > tbody')[0];
        Sortable.create(el1, {
     
          disabled: false, // 是否开启拖拽
          ghostClass: 'sortable-ghost', //拖拽样式
          animation: 150, // 拖拽延时，效果更好看
          group: {
      // 是否开启跨表拖拽
            pull: false,
            put: false
          },
          onEnd: (e) => {
      // 这里主要进行数据的处理，拖拽实际并不会改变绑定数据的顺序，这里需要自己做数据的顺序更改
            let arr = this.Data; // 获取表数据
            arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]); // 数据处理
            this.$nextTick(function () {
     
              this.Data= arr; 
            });
          }
        });
      }
</script>
<style lang="less" type="text/less">
	.sortable-ghost {
     
      opacity: 0.4;
      background-color: #F4E2C9;
    }
</style>

重要（坑）：

在element-ui table 一定要指定row-key 属性！，否则拖拽排序会出问题。