element tree 上移下移排序

对选中的tree做上下移动操作
需要下标判断当前的位置，用以判断上移下移的显示，和获取上下位置的tree的id

难点：目前不知道当前tree的下标

解决方法：tree有个node，可以获取当前tree所有内容，其中parent.childNodes 可以获取到当前tree的列表，对这个列表循环判断得出下标。

效果：


代码片段：

       <el-tree
          :data="data"
          :props="defaultProps"
          node-key="id"
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
          :default-expanded-keys="selectArr"
          :show-close="false"
          ref="tree"
          @node-expand="statusData.actived=false"
          @node-collapse="statusData.actived=false"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }" @click="act(data,node)">
            <span>{{ node.label }}</span>
            <span class="gc-fl-right iconBlock">
              <i
                class="el-icon-more icon"
                :class="(statusData.pid==data.id&&statusData.actived)?'select':''"
                @click.stop="editDialog(data)"
              ></i>
              <div class="editlayer" v-if="statusData.pid==data.id&&statusData.actived">
                <p @click.stop="addsecondary(data.id,data.name)">添加子部门</p>
                <p @click.stop="editmenu(data.id,data.name)">修改名称</p>
                <p @click.stop="del(2,data.id,data.name)">删除</p>
                <p v-if="statusData.treeIndex>0" @click="sort(1,data,node)">上移</p>
                <p
                  v-if="statusData.treeIndex<(statusData.treeLength-1)"
                  @click="sort(2,data,node)"
                >下移</p>
              </div>
            </span>
          </span>
        </el-tree>

data(){
  return{
      statusData: {
        actived: false, //是否显示tree的操作框
        isAdd: 0, //0表格显示 1添加人员显示 2详情显示 3编辑人员显示
        pid: 0, //左侧选中的id
        pName: "", //右侧显示的title
        total: 0, //右侧显示的人员数量,
        treeIndex: 0, //选中tree的id
        treeLength: 0 //选中tree的那层的长度
      },
      selectArr: [],
      data: [], //tree数据
      defaultProps: {
        children: "child",
        label: "name"
      },
  }
},
methods: {
 //切换选项，右侧表格内容更新
    act(data, node) {
      this.statusData.pid = data.id;
      this.statusData.pName = data.name;
      this.statusData.actived = false;
      this.statusData.isAdd = 0;
      let parentList = node.parent.childNodes;
      let index = "";
      parentList.forEach((item, indexs) => {
        if (item.key == data.id) {
          index = indexs;
        }
      });
      this.statusData.treeIndex = index; //下标
      this.statusData.treeLength = parentList.length;
    },
    
   sort(type, data, node) {
      let index = this.statusData.treeIndex;
      let parentList = node.parent.childNodes;
      let config = {
        current_id: data.id
      };
      if (type == 1) {
        config.exchange_id = parentList[index - 1].key; //上移
      } else {
        config.exchange_id = parentList[index + 1].key; //下移
      }
      httpApi
        .sortDepartment(config)
        .then(res => {
          if (res.code == "200") {
            this.$message({
              type: "success",
              message: res.msg
            });
            this.leftData(data.id);
            this.statusData.actived = false;
          } else {
            this.$message({
              type: "warning",
              message: res.msg
            });
          }
        })
        .catch(err => {
          this.$message({
            type: "warning",
            message: res.msg
          });
        });
    },

}

.el-tree {
      width: 250px;
      > .el-tree-node {
        > .el-tree-node__content {
          .custom-tree-node {
            span {
              font-weight: 500;
            }
          }
        }
      }
      .el-tree-node__expand-icon.el-icon-caret-right::before {
        font-size: 16px;
        color: #999999;
      }
      .is-leaf.el-tree-node__expand-icon.el-icon-caret-right::before {
        display: none;
      }
      .el-tree-node__content {
        height: 38px;
        line-height: 38px;
        padding-right: 10px;
        .custom-tree-node {
          width: 100%;
          height: 38px;
          line-height: 38px;
        }
      }
      .el-tree-node__content:hover {
        background-color: #fff;
      }
      .iconBlock {
        width: 20px;
        height: 100%;
        padding-top: 14px;
        .icon {
          display: none;
          transform: rotate(90deg);
        }
        .icon.select {
          color: #61c5c1;
        }
      }

      .el-tree-node > .el-tree-node__children {
        overflow: initial;
      }
      .is-current > .el-tree-node__content {
        height: 38px;
        line-height: 38px;
        background: #f4f7f6;
        border-radius: 4px;
        position: relative;
        .icon {
          display: block;
        }
        .editlayer {
          position: absolute;
          width: 110px;
          background: rgba(255, 255, 255, 1);
          border-radius: 4px;
          box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.15);
          right: -105px;
          top: 0px;
          color: #333333;
          z-index: 1000;
          padding: 10px;
          text-align: center;
          p {
            height: 34px;
            line-height: 34px;
          }
          p:hover {
            background: #f4f7f6;
            border-radius: 4px;
          }
        }

        .icon:hover + .editlayer {
          display: block;
          cursor: pointer;
        }
        .editlayer:hover {
          display: block;
          cursor: pointer;
          z-index: 1000;
        }
      }
    }