安装依赖 vuedraggable
安装 vuedraggable 的同时，会自动安装 sortablejs
npm i -S vuedraggable
或直接安装 sortablejs
npm install sortablejs --save
更多配置参考—— vue.draggable中文文档
http://www.itxst.com/vue-draggable/tutorial.html
实现拖拽的要点
使用class为 draggable 的div 包裹整个表格，以便拖拽代码中，准确抓取到拖拽元素的父容器
行拖拽要点
需在 el-table 标签中，根据行的内容指定行的唯一标识 row-key="id"
列拖拽要点
需额外定义两个数组，分别存储拖拽前的列顺序和拖拽后的列顺序
完整范例代码
<template> <div class="draggable" style="padding: 20px"> <el-table row-key="id" :data="tableData" style="width: 100%" border > <el-table-column v-for="(item,index) in oldList" :key="`col_${index}`" :prop="newList[index].prop" :label="item.label" align="center" > </el-table-column> </el-table> </div> </template> <script> import Sortable from 'sortablejs'; export default { mounted() { this.oldList = JSON.parse(JSON.stringify(this.tableConfig.tableItems)) this.newList = JSON.parse(JSON.stringify(this.tableConfig.tableItems)) this.columnDrop() this.rowDrop() }, data() { return { oldList: [], newList: [], tableData: [ { id:1, name:'李一', gender:'男', age:30, job:"会计" }, { id:2, name:'王二', gender:'未知', age:18, job:"无业游民" }, { id:3, name:'张三', gender:'男', age:50, job:"老板" }, ], tableConfig: { tableItems: [ { label: '姓名', prop: 'name', }, { label: '性别', prop: 'gender', }, { label: '年龄', prop: 'age', }, { label: '工作', prop: 'job', }, ] } } }, methods: { // 行拖拽 rowDrop() { // 此时找到的元素是要拖拽元素的父容器 const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody'); const _this = this; Sortable.create(tbody, { // 指定父元素下可被拖拽的子元素 draggable: ".draggable .el-table__row", onEnd({newIndex, oldIndex}) { const currRow = _this.tableData.splice(oldIndex, 1)[0]; _this.tableData.splice(newIndex, 0, currRow); } }); }, // 列拖拽 columnDrop() { const wrapperTr = document.querySelector('.draggable .el-table__header-wrapper tr'); this.sortable = Sortable.create(wrapperTr, { animation: 180, delay: 0, onEnd: evt => { const oldItem = this.newList[evt.oldIndex]; this.newList.splice(evt.oldIndex, 1); this.newList.splice(evt.newIndex, 0, oldItem); } }); } } } </script> <style scoped> </style>
