使用组件时需要安装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, // 行唯一值如idloading: {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经测试，交换时会有异常，比如表头没有拖动，但是数据实现了交换。
