最近在把舊版本的ztree部門排序完成后，詳情見 zTree通用拖拽排序
尋思著把新版本的el-tree也給加入排序功能仔雷，畢竟一碗水要端平（功能都是自己寫的屋匕。封豪。。）炒瘟，由于二者表結(jié)構(gòu)也類似，核心也還是那幾個(gè)字段 id第步、pid疮装、order缘琅，就看了下ElementUI官網(wǎng)的文檔，便有了這么一篇廓推，原則上還是以盡可能的少改動(dòng)數(shù)據(jù)為優(yōu)先

首先我們的Vue文件聲明如下（由于文件內(nèi)容多刷袍，只貼關(guān)鍵代碼），主要加入了draggable屬性和node-drop事件樊展，支持拖拽

<el-tree
  :data="deptTree"
  :props="defaultProps"
  :expand-on-click-node="false"
  :filter-node-method="filterNode"
  highlight-current
  node-key="id"
  ref="tree"
  default-expand-all
  @node-click="handleNodeClick"
  @node-drop="handleDrop"
  draggable
>

在vue mounted中添加handleDrop方法呻纹，通過對(duì)draggingNode、dropNode多次分析數(shù)據(jù)結(jié)構(gòu)后专缠，發(fā)現(xiàn)規(guī)律以及和ztree的不同

• el-tree的level規(guī)則判定和ztree不一樣雷酪，ztree能肉眼可見的第一層級(jí)level為0，el-tree則為1
• ztree的第一層級(jí)的penart為null涝婉，el-tree第一層級(jí)還能向上哥力，得到level為0的節(jié)點(diǎn)
• ztree的源節(jié)點(diǎn)在拖拽后自動(dòng)會(huì)變更該節(jié)點(diǎn)的pId和parentTid，這是ztree自己的屬性墩弯，而非我們自己的pid吩跋，我們自己的pid在拖拽完成后是不變的，原來的父節(jié)點(diǎn)還是原來的父節(jié)點(diǎn)（仔細(xì)看pId和pid是有區(qū)別的）

具體實(shí)現(xiàn)如下渔工，具體實(shí)現(xiàn)思路在注釋中注明：

    // 拖拽事件 參數(shù)依次為：被拖拽節(jié)點(diǎn)對(duì)應(yīng)的 Node锌钮、結(jié)束拖拽時(shí)最后進(jìn)入的節(jié)點(diǎn)、被拖拽節(jié)點(diǎn)的放置位置（before引矩、after梁丘、inner）、event
    handleDrop: async function(draggingNode, dropNode, dropType, ev) {
          var paramData = [];
          // 當(dāng)拖拽類型不為inner,說明只是同級(jí)或者跨級(jí)排序脓魏，只需要尋找目標(biāo)節(jié)點(diǎn)的父ID兰吟，獲取其對(duì)象以及所有的子節(jié)點(diǎn)，并為子節(jié)點(diǎn)設(shè)置當(dāng)前對(duì)象的ID為父ID即可
          // 當(dāng)拖拽類型為inner茂翔，說明拖拽節(jié)點(diǎn)成為了目標(biāo)節(jié)點(diǎn)的子節(jié)點(diǎn)混蔼，只需要獲取目標(biāo)節(jié)點(diǎn)對(duì)象即可
          var data = dropType != "inner" ? dropNode.parent.data : dropNode.data;
          var nodeData = dropNode.level == 1 && dropType != "inner" ? data : data.children;
          // 設(shè)置父ID,當(dāng)level為1說明在第一級(jí)，pid為空
          nodeData.forEach(element => {
            element.pid = dropNode.level == 1 ? "" : data.id;
          });
          nodeData.forEach((element, i) => {
            var dept = {
              deptId: element.id,
              parentDeptId: element.pid,
              order: i
            };
            paramData.push(dept);
          });
        
          this.loading = true;
          // 得到這次操作需要變更的數(shù)據(jù)范圍珊燎，請(qǐng)求后臺(tái)批量處理即可...
          DeptAPI.updateDeptTreeOrder(JSON.stringify(paramData)).then(res => {
            console.log(res);
            //自行邏輯惭嚣，可以加提示框message
            this.loading = false;
          });
    },

把DeptAPI也貼出來吧，是我引入的dept.js文件

/**
 * 部門排序
 * @param {*} data
 */
const updateDeptTreeOrder = data => {
  return request({
    url: '...',
    method: "POST",
    headers: {
      'Content-Type': 'application/json;charset=UTF-8'
    },
    data: data
  })
}
export default {
  updateDeptTreeOrder
};

后端Controller層使用@RequestBody接收List<Dept>對(duì)象悔政，具體可以見文章SpringBoot 接收List＜Bean＞參數(shù)問題（POST請(qǐng)求方式）

注意需要設(shè)置axios的Content-Type為application/json;charset=UTF-8

在這里插入圖片描述