安裝依賴drag-tree-table（更多文件見github）

yarn add  drag-tree-table

html

<dragTreeTable
          ref="table"
          :data="treeData"
          @drag="onTreeDataChange"
          onlySameLevelCanDrag
          resize
          fixed
          :isdraggable="true"
        >
          <template #selection="{row}">
            {{ row.menuName }}
          
 
</template>
          <template #icon="{row}">
            <svg-icon :icon-class="row.icon" />
          </template>
          <template #visible="{row}">
            <div @click.stop>
              <el-switch
                @change="
                  val => {
                    visiableChange(val, row)
                  }
                
 
"
                v-model="row.visible"
                active-value="0"
                inactive-value="1"
              />
            </div>
          </template>
          <template #edit="{row}">
            <el-button
              v-hasPermi="['system:menu:edit']"
              type
 
="text"
              icon="el-icon-edit"
              @click.stop.prevent="handleUpdate(row)"
              >編輯</el-button
            >
            <el-button
              v-hasPermi="['system:menu:add']"
              type="text"
              icon="el-icon-plus"
              @click.stop.prevent="handleAdd(row)"
              >新增</el-button
            >
            <el-button
              v-hasPermi="['system:menu:remove']"
              class="btn-delete"
              type="text"
              icon="el-icon-delete"
              @click.stop.prevent="handleDelete(row)"
              >刪除</el-button
            >
          </template>
        </dragTreeTable>

js

import dragTreeTable from 'drag-tree-table'

@Component({
  name: 'MenuManage',
  components: {
    dragTreeTable
  }
})

private tableIdArr: Array<string> = []
private treeData: any = {
    lists: [],
    columns: [
      {
        type: 'selection',
        title: '選單名稱',
        field: 'menuName',
        width: 130,
        align: 'left'
      },
      {
        type: 'icon',
        title: '圖示',
        field: 'icon',
        width: 100
      },
      // {
      //   title: '排序',
      //   field: 'orderNum',
      //   width: 60
      // },
      {
        title: '許可權標識',
        field: 'perms',
        width: 130
      },
      {
        title: '元件路徑',
        field: 'component',
        width: 180
      },
      {
        type: 'visible',
        title: '可見',
        field: 'visible',
        width: 80
      },
      {
        title: '建立時間',
        field: 'createTime',
        width: 180
      },
      {
        type: 'edit',
        title: '操作',
        field: '',
        width: 200,
        align: 'center'
      }
    ]
}

拖拽方法

  // 樹形table拖拽排序
  onTreeDataChange(list: Array<object>, curObj: any) {
    this.treeData.lists = list // 拖拽後的資料
    this.tableIdArr = []
    // const idArr = this.filterIdArrFun(JSON.parse(JSON.stringify(list)), curObj.parent_id)
    const putData = {
      parentId: curObj.parent_id, // 父目錄id
      ids: this.tableIdArr  // 同級id
    }
  // 得到父id和同級id陣列即可請求介面

  }
  /** 遞迴獲取父級id相同物件的id陣列 **/
  filterIdArrFun(data: any, parentId: string) {
    const firstFun = data.map((q: any) => {
      if (q.lists && q.lists.length > 0) {
        if (q.parentId == parentId) {
          this.tableIdArr.push(q.id)
        }
        q.lists = this.filterIdArrFun(JSON.parse(JSON.stringify(q.lists)), parentId)
      } else {
        if (q.parent_id === parentId) {
          this.tableIdArr.push(q.id)
        }
      }
      return q
    })
    return this.tableIdArr
  }