基于Vue实现表格拖拽排序——sortablejs

1、安装插件

npm install sortablejs --save

2、页面引入sortablejs

import Sortable from 'sortablejs'

3、准备表格渲染所需的数据

  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: "2019-12-23",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 100 弄",
        },
        {
    
    
          id: "2",
          date: "2019-12-22",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 200 弄",
        },
        {
    
    
          id: "3",
          date: "2019-12-21",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 300 弄",
        }
      ],
    };
  },

4、绘制表格结构（要绑定唯一的值row-key，不然会出错）

<template>
  <div style="width: 800px">
    <el-table :data="tableData" border row-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:json数据格式化展示 -->
    <pre style="text-align: left">
      {
    
    {
    
     dropCol }}
    </pre>
    <hr />
    <pre style="text-align: left">
      {
    
    {
    
     tableData }}
    </pre>
  </div>
</template>

5、完成表格行与列的拖拽排序事件

  mounted() {
    
    
    this.rowDrop();
    this.columnDrop();
  },
  methods: {
    
    
    //行拖拽
    rowDrop() {
    
    
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
    
    
        animation: 150,
        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);
        },
      });
    },
  },