element ui + sortablejs實現表格的行列拖拽

<template>
  <div class="container">
    <el-table :data="tableData" border row-key="id">
      <el-table-column align="center" v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop" :label="item.label"
      ></el-table-column>
    </el-table>
  </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: "2016-05-02", name: "王小虎1", address: "上海市普陀區金沙江路 100 弄" }, { id: 2, date: "2016-05-04", name: "王小虎2", address: "上海市普陀區金沙江路 200 弄" }, { id: 3, date: "2016-05-01", name: "王小虎3", address: "上海市普陀區金沙江路 300 弄" }, { id: 4, date: "2016-05-03", name: "王小虎4", address: "上海市普陀區金沙江路 400 弄" } ] }; }, components: { }, mounted() { // 阻止默認行為
 document.body.ondrop = function(event) { event.preventDefault(); event.stopPropagation(); }; this.rowDrop(); this.columnDrop(); }, methods: { //行拖拽
 rowDrop() { const tbody = document.querySelector(".el-table__body-wrapper tbody"); const _this = this; Sortable.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, filter: ".cannotDrag", onEnd: evt => { const oldItem = this.dropCol[evt.oldIndex]; this.dropCol.splice(evt.oldIndex, 1); this.dropCol.splice(evt.newIndex, 0, oldItem); } }); } } }; </script>

<style scoped lang="scss">

</style>

注意: 當一個頁面有多個表格時候 選擇器 換成 querySelectorAll 做對應的判斷處理即可；更多屬性請遵照官網api：http://www.sortablejs.com/options.html，自己寫的表格或者ul需要拖拽的話itme的樣式使用display:inline-block;