element表格拖拽排序

实现element表格拖拽排序
一.

  //添加拖拽列和样式
 <el-table-column align="center" label="Drag" width="80">
        <template slot-scope="{}">
          <!-- <svg-icon class="drag-handler" icon-class="drag" /> -->
          <i class="el-icon-time" />
        </template>
 </el-table-column>

二.

import Sortable from 'sortablejs'在需要拖拽的组件中引入和下包

三.

在return中定义
sortable: null

四.

在表格的请求中添加
this.$nextTick(() => {
        this.setSort()
      })

五.

添加ref
<el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      ref="dragTable"
    >

六.在methods中添加方法

setSort() {
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function(dataTransfer) {
          // to avoid Firefox bug
          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
          dataTransfer.setData('Text', '')
        },
      })
    }