拖拽效果，先放效果图，步骤放在后面~~
一、引入三方插件
1.引入sortable.js的包: npm install sortable.js --save
2.或者npm i -S vuedraggable
vuedraggable依赖 Sortable.js，所以下载了vuedraggable，我们便可以直接引入Sortable使用Sortable的特性。
vuedraggable是Sortable一种加强，实现组件化的思想，可以结合Vue，使用起来更方便
二、Sortable使用
在这里我们还是使用一句Sortable的构建方式
import Sortable from 'sortablejs';
三、实例
需要注意的是element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。
<template><div style="width:800px"><el-table :data="tableData"borderrow-key="id"align="left"><el-table-column v-for="(item, index) in col":key="`col_${index}`":prop="dropCol[index].prop":label="item.label"> </el-table-column></el-table><pre style="text-align: left">{{dropCol}}</pre><hr><pre style="text-align: left">{{tableData}}</pre></div></template><script>import Sortable from 'sortablejs'export default {data() {return {col: [{label: '日期',prop: 'date'},{label: '姓名',prop: 'name'},{label: '地址',prop: 'address'}],dropCol: [{label: '日期',prop: 'date'},{label: '姓名',prop: 'name'},{label: '地址',prop: 'address'}],tableData: [{id: '1',date: '-05-02',name: '王小虎1',address: '上海市普陀区金沙江路 100 弄'},{id: '2',date: '-05-04',name: '王小虎2',address: '上海市普陀区金沙江路 200 弄'},{id: '3',date: '-05-01',name: '王小虎3',address: '上海市普陀区金沙江路 300 弄'},{id: '4',date: '-05-03',name: '王小虎4',address: '上海市普陀区金沙江路 400 弄'}]}},mounted() {this.rowDrop()this.columnDrop()},methods: {//行拖拽 rowDrop() {const tbody = document.querySelector('.el-table__body-wrapper tbody')const _this = thisSortable.create(tbody, {onEnd({ newIndex, oldIndex }) {const currRow = _this.tableData.splice(oldIndex, 1)[0]_this.tableData.splice(newIndex, 0, currRow)}})},//列拖拽 columnDrop() {const wrapperTr = document.querySelector('.el-table__header-wrapper tr')this.sortable = Sortable.create(wrapperTr, {animation: 180,delay: 0,onEnd: evt => {const oldItem = this.dropCol[evt.oldIndex]this.dropCol.splice(evt.oldIndex, 1)this.dropCol.splice(evt.newIndex, 0, oldItem)}})}}}</script>
四、补充说明
可以直接绑定从服务器查询到的结果，也可以动态绑定vueX里的数据，如要保存排序结果的话，则需要后台根据保存时的数据顺序进行保存
嗯。就酱~~
参考/p/6da3043aed2a
参考/kf/11/785039.html
