基于sortable对表格进行行列的拖拽

直接上代码：

<!--
 * @Company: wwww.glaway.com
 * @Copyright: (c) 2020. All Rights Reserved
 * @Author: zq
 * @Date: 2020-10-30 17:14:37
 * @Description: 
 * @LastEditors: zq
 * @LastEditTime: 2020-11-03 14:42:09
-->
<template>
  <div>
    <div class="table-container">
      <table border="1" cellspacing="0" class="table-parent" ref="xTable">
        <thead>
          <tr class="trtr">
            <th v-for="(item, index) in col" :key="index">{{ item.label }}</th>
          </tr>
        </thead>
        <div class="body">
          <tbody class="bodybody">
            <tr v-for="(item, index) in tableData" :key="index">
              <td>
                <i class="el-icon-menu drag-btn"></i>
              </td>
              <td v-for="(m, i) in dropCol" :key="i">{{ item[m.prop] }}</td>
            </tr>
          </tbody>
        </div>
      </table>
    </div>
  </div>
</template>

<script>
import Sortable from "sortablejs";
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016",
          name: "王小虎",
          address: "上海市"
        },
        {
          date: "2017",
          name: "王小虎",
          address: "上海市普"
        },
        {
          date: "2018",
          name: "王小虎",
          address: "上海市普陀"
        },
        {
          date: "2019",
          name: "王小虎",
          address: "上海市普陀区"
        },
        {
          date: "2020",
          name: "王小虎",
          address: "上海市普陀区金"
        },
        {
          date: "2019",
          name: "王小虎",
          address: "上海市普陀区金沙"
        },
        {
          date: "2013",
          name: "王小虎",
          address: "上海市普陀区金沙江"
        },
        {
          date: "2014",
          name: "王小虎",
          address: "上海市普陀区金沙江路"
        },
        {
          date: "2015",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1"
        }
      ],
      col: [
        {
          label: "日期",
          prop: "date"
        },
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "地址",
          prop: "address"
        }
      ],
      dropCol: [
        {
          label: "日期",
          prop: "date"
        },
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "地址",
          prop: "address"
        }
      ]
    };
  },
  methods: {
    // 列拖动
    columnDrop() {
      const wrapperTr = document.getElementsByClassName("trtr")[0];
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: ({ newIndex, oldIndex }) => {
          console.log(evt.oldIndex, evt.newIndex);
          const oldItem = this.dropCol[oldIndex];
          this.dropCol.splice(oldIndex, 1);
          this.dropCol.splice(newIndex, 0, oldItem);
        }
      });
    },
    // 行拖动
    rowDrop() {
      this.$nextTick(() => {
        let xTable = this.$refs.xTable;
        this.sortable = Sortable.create(
          document.getElementsByClassName("bodybody")[0],
          {
            handle: ".drag-btn",
            onEnd: ({ newIndex, oldIndex }) => {
              this.tableData.splice(
                newIndex,
                0,
                this.tableData.splice(oldIndex, 1)[0]
              );
              var newArray = this.tableData.slice(0);
              this.tableData = [];
              this.$nextTick(function() {
                this.tableData = newArray;
                console.log(this.tableData);
              });
            }
          }
        );
      });
    }
  },
  mounted() {
	  getDataByPartNum("AL1.100.001", "A.124", "").then(res => {
	      // 重置一下
	      this.tableData = [];
	      this.col = [];
	      this.dropCol = [];
	
	      this.tableData = JSON.parse(res.data.obj);
	      let newArray = [];
	      for (let i in this.tableData[0]) {
	        newArray.push({ label: i, prop: i });
	      }
	      this.col = newArray;
	      this.dropCol = JSON.parse(JSON.stringify(newArray));
	    });
   		this.columnDrop();
    	this.rowDrop();
  }
};
</script>
<style lang="scss" scoped>
.table-container {
  width: 100%;
  height: 500px;
  overflow-x: auto;
  overflow-y: hidden;
  .table-parent {
    height: 500px;
    box-sizing: border-box;
    thead {
      background-color: #eee;
      tr {
        display: flex;
        height: 50px;
        float: left;
        margin-left: 258px;

        th {
          background-color: #eee;
          line-height: 50px;
          width: 200px;
          height: 50px;
          border: 1px solid #ccc;
          border-top: none;
          border-bottom: none;
        }
      }
    }
    .body {
      height: 100%;
      overflow-y: auto;
      tbody {
        height: 200px;
        overflow: auto;
        tr {
          display: flex;
          td {
            text-align: center;
            width: 200px;
            height: 50px;
            line-height: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          td:nth-child(1) {
            width: 50px;
          }
        }
      }
    }
    // ::-webkit-scrollbar {
    //   width: 0px;
    // }
  }
}
</style>

效果图：