sortablejs el-table 实现简单的拖拽功能

使用方法：sortablejs

第一步：安装sortablejs

npm install sortablejs --save

第二步：在需要的页面引入

import Sortable from 'sortablejs'

第三步：表格样式

 <el-table
          :data="tableData"
          ref="dragTable"
          class="draggable"
          row-key="id"
          border
          highligh-current-row
        >
          <el-table-column prop="date" label="Date" />
          <el-table-column prop="name" label="Name" />
          <el-table-column prop="address" label="Address" />
          <el-table-column prop="handel" label="排序">
            <template #default="{}">
              <el-icon class="drag-hander" :size="20"><Rank /></el-icon>
            </template>
          </el-table-column>
        </el-table>

第四步：定义数组

 tableData: [
          {
            id: 1,
            date: '2016-05-02',
            name: 'wangxiaohu',
            address: 'No. 189, Grove St, Los Angeles',
          },
          {
            id: 2,
            date: '2016-05-04',
            name: 'wangxiaohu',
            address: 'No. 189, Grove St, Los Angeles',
          },
          {
            id: 3,
            date: '2016-05-01',
            name: 'wangxiaohu',
            address: 'No. 189, Grove St, Los Angeles',
          },
          {
            id: 4,
            date: '2016-05-03',
            name: 'wangxiaohu',
            address: 'No. 189, Grove St, Los Angeles',
          },
        ],

第五步：方法实现

 methods: {
      rowDrop() {
        const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody');
        if (!tbody) {
          return;
        }
        Sortable.create(tbody, {
          // Sortable 配置项
          draggable: '.draggable .el-table__row',
          onEnd: this.handleSortEnd, // 处理拖拽结束后的逻辑
        });
      },
      handleSortEnd(event) {
        if (event.oldIndex !== undefined && event.newIndex !== undefined) {
          const { oldIndex, newIndex } = event;
          const movedItem = this.tableData.splice(oldIndex, 1)[0];
          this.tableData.splice(newIndex, 0, movedItem);
        }
      },
    },

参考链接：https://www.jb51.net/javascript/31103517b.htm