【前端開發】基於vue的樹形結構table拖拽排序教程

安裝依賴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
  }

 

效果