可拖拽表格列组件（可以禁止拖动列如序号）

使用组件时需要安装sortablejs

$ npm install sortablejs --save

组件

<template>
<el-table ref="dragTable" :data="tableData" class="drag-table" border stripe :row-key="uniqueKey" tooltip-effect="dark" height="100%" element-loading-text="拼命加载中" v-loading="loading" element-loading-spinner="el-icon-loading">
  <el-table-column v-if="select" type="selection" :reserve-selection="multiple"></el-table-column>
  <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
  <el-table-column v-for="(item, index) in col" v-if="item" :key="`col_${index}`" :prop="dropCol[index].prop" :min-width="item.width || null" :label="item.label" align="center" show-overflow-tooltip sortable class-name="allow-drag">
  </el-table-column>
</el-table>
</template>

<script>
import Sortable from 'sortablejs'
export default {
  name: 'DragTable',
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableHeader: {
      type: Array,
      default: () => {
        return []
      }
    },
    select: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    uniqueKey: String, // 行唯一值如id
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      dropCol: []
    }
  },
  computed: {
    col: function () {
      let fillArray = this.select ? new Array(2).fill(null) : new Array(1).fill(null)
      return fillArray.concat(this.tableHeader)
    }
  },
  methods: {
    columnDrop () {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        draggable: '.allow-drag',
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }
  },
  created () {
    let fillArray = this.select ? new Array(2).fill(null) : new Array(1).fill(null)
    this.dropCol = fillArray.concat(this.tableHeader)
  },
  mounted () {
    this.columnDrop()
  }
}
</script>

<style lang="less" scoped>
/deep/ .drag-table {}
</style>

使用方式

 <drag-table :tableData="listTableData" :tableHeader="tableHeader" :loading='btnValid.search' uniqueKey='createTime'></drag-table>

说明：
需要拖动的列设置class-name="allow-drag"，在Sortable.create中使用了draggable: '.allow-drag'。draggable参数设置的是可拖动的列，不设置的列不能拖动，也不能作为可以拖动的列的落点。如果某一列可以换位置，但是不能拖动，可以使用参数filter: ".ignore-elements"，不能拖动的列需要设置class-name="ignore-elements。
这里使用了col和dropCol的原因是，拖动后原来的col数组里面的项并不会交换位置，但是视觉上表头交换了位置，所以需要一个可以交换位置的数组来弥补数据不能交换位置的情况。用同一个col经测试，交换时会有异常，比如表头没有拖动，但是数据实现了交换。