el-tree树状拖拽排序

控件

 <el-tree
      ref="tree2"
      v-loading="loading_tree"
      element-loading-text="加载树状中..."
      empty-text=""
      :data="data"
      node-key="id"
      :props="defaultProps"
      class="filter-tree"
      :default-expand-all="is_expand"
      :allow-drop="collapse"
      draggable
      accordion
      :expand-on-click-node="false"
      @node-click="show_info"
      @node-drop="handleDrop"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span class="custom-tree-node-name">{{ node.label }}</span>
        <span class="custom-tree-node-btn">
          <el-button v-if="node.level !== 1" type="text" size="mini" @click="handleUpdate(node)">
            修改
          </el-button>
          <el-button v-if="data.haschild === 1" type="text" size="mini" @click="handleAdd(node,1)">
            新增产品线
          </el-button>
          <el-button v-if="data.haschild===1 && node.level !== 1" type="text" size="mini" @click="handleAdd(node,2)">
            新增服务单元
          </el-button>
          <el-button v-if="data.haschild===0" type="text" size="mini" @click="handleManage(node)">
            机器管理
          </el-button>
          <el-button v-if="data.haschild===0" type="text" size="mini" @click="handleConfig(node)">
            加速配置
          </el-button>
          <el-button v-if="node.level !== 1" type="text" size="mini">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>

抽取所有层级关系，传递给后端进行首次排序

handleDrop(current, old, position, e) {
      console.log(current, old, position, e, '拖拽成功结束')
      // 第一次拖拽获得整棵树然后给整棵树进行排序
      const map = current.store.nodesMap
      let key = ''
      for (const i in map) {
        let tmp_map = map[i]
        // let key = ''
        while (tmp_map.data.id !== 1) {
          key += key.endsWith('|') ? tmp_map.data.id : '_' + tmp_map.data.id
          tmp_map = tmp_map.parent
        }
        key += key === '' ? '1' : '_1'
        key += '|'
        // console.log(key, 'keykey')
      }
      service_tree_sort({ 'key': key }).then(res => {
        console.log(res, 'aaaa')
      }).catch(err => {
        console.log(err, 'err')
      })
    },