Vue Elementui表格行列实现拖拽排序

由于elementUI 表格没有自带的拖拽排序的功能，本文主要通过第三方插件Sortablejs来实现。

1. 安装sortablejs

npm install sortablejs --save

2. 引用

(在需要的页面引入，其他位置可能报错)

import Sortable from ‘sortablejs’

3. 具体使用 部分主要的示例代码

*注意的是element table务必指定row-key，且row-key必须是唯一的，如 ID，不然会出现排序不对的情况。

	<!--table代码-->
    <el-table :data="dataList" row-key="id"
              border v-loading="dataListLoading" ref="dataTable"
              style="width: 100%">
      <template v-for="(item, index) in col">
        <el-table-column v-if="dropCol[index].label === '某个字段'"
                         :key="`col_${index}`"
                         :prop="dropCol[index].prop"
                         :label="item.label"
                         :width="item.width"
                         header-align="center"
                         align="center">
          <template slot-scope="scope">
            <span @click="showDetail(scope.row)">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column v-else
                         :key="`col_${index}`"
                         :prop="dropCol[index].prop"
                         :label="item.label"
                         :width="item.width"
                         header-align="center"
                         align="center">
        </el-table-column>
      </template>
      <el-table-column prop="status" label="操作" width="150" header-align="center" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

 data() {
    return {
      col: [
        {label: '名称', prop: 'name', width: 150},
        {label: '类型', prop: 'type', width: 150},
        {label: '数量', prop: 'num', width: 100}
        ],
        dropCol: [
        {label: '名称', prop: 'name', width: 150},
        {label: '类型', prop: 'type', width: 150},
        {label: '数量', prop: 'num', width: 100}
        ]
    }
 }

 mounted () {
    // 调用 table拖拽排序
    this.rowDrop()
    this.columnDrop()
  }

 	// 具体方法
    // 行拖拽
    rowDrop () {
      let tbody = document.querySelector('.el-table__body-wrapper tbody')
      let _this = this
      Sortable.create(tbody, {
        group: {
          name: 'words',
          pull: true,
          put: true
        },
        animation: 150, // 动画参数
        onAdd: function (evt) { // 拖拽时候添加有新的节点的时候发生该事件
        },
        onUpdate: function (evt) { // 拖拽更新节点位置发生该事件
          console.log('onUpdate.foo:', [evt.item, evt.from])
        },
        onRemove: function (evt) { // 删除拖拽节点的时候促发该事件
          console.log('onRemove.foo:', [evt.item, evt.from])
        },
        onStart: function (evt) { // 开始拖拽出发该函数
          console.log('onStart.foo:', [evt.item, evt.from])
        },
        onSort: function (evt) { // 发生排序发生该事件
          console.log('onUpdate.foo:', [evt.item, evt.from])
        },
        onEnd ({ newIndex, oldIndex }) {
          let currRow = _this.dataList.splice(oldIndex, 1)[0]
          _this.dataList.splice(newIndex, 0, currRow)
        }
      })
    },
    // 列拖拽
    columnDrop () {
      let wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          let oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }