el-tree实现拖动置顶排序

//html代码
<div class="dialog-tree">
    <el-tree
      :data="templateLexiconData"
      :props="templateLexiconProps"
      node-key="Id"
      draggable
      :key="tree_key"
      :render-content="renderContent"
      :default-expanded-keys="defaultExpand"
      @node-click="reportTemplateTreeClick"
      :expand-on-click-node="false"
      :allow-drop="collapse"
      @node-drop="sort"
      v-loading="loading"
    ></el-tree>
</div>

//js代码
// 结构树操作group node,
renderContent(h, { node, data, store }) {
  return (
    <span
      class="el-tree-span"
      on-mouseenter={() => this.mouseenteract(data)}
      on-mouseleave={() => this.mouseleaveact(data)}
    >
      <span class="el-tree-font">{data.Name}</span>
      {this.isact == data ? (
        <span class="tree_node_op">
          <i
            class="el-icon-upload2"
            style="font-size:12px"
            v-show="data.show"
            on-click={() => this.nodeUp(node, data)}
          >
            置顶
          </i>
        </span>
      ) : (
        <span></span>
      )}
    </span>
  );
},
// 树节点鼠标移入移出
mouseenteract(da) {
  this.isact = da;
},
mouseleaveact(da) {
  this.isact = "";
},
//置顶
nodeUp(node, data) {
  const nextLabel = node.label;
  const parent = node.parent;
  const children = parent.data.Children || parent.data;
  const cIndex = children.findIndex(d => d.Id === data.Id);
  if (parent.level === 0 && cIndex === 0) {
    this.$message.warning("已经排序第一的不能再置顶！");
  } else if (parent.level !== 0 && cIndex === 0) {
    this.$message.warning("已经排序第一的不能再置顶！");
  } else if (
    (parent.level === 0 && cIndex !== 0) ||
    (parent.level !== 0 && cIndex !== 0)
  ) {
    const tempChildrenNodex1 = children[0];
    const tempChildrenNodex2 = children[cIndex];
    this.$set(children, 0, tempChildrenNodex2);
    this.$set(children, cIndex, tempChildrenNodex1);
    if (typeof parent.label != "undefined") {
      this.defaultExpand[0] = parent.label;
    }
    const _newsList = [];
    const _data =
      node.level == 1 ? node.parent.data : node.parent.data.Children;
    _data.forEach((item, index) => {
      _newsList.push({
        TName: item.Name,
        TSearchId: index + 1
      });
    });
    const types = 2;
    this.getSetorderData(node, data, nextLabel, _newsList, types); //接口传值，根据自己的需求来
  }
  this.tree_key++;
},
//拖拽判断
collapse(draggingNode, dropNode, type) {
  if (draggingNode.level === dropNode.level) {
    if (draggingNode.parent.id === dropNode.parent.id) {
      // 向上拖拽 || 向下拖拽
      return type === "prev" || type === "next";
    }
  } else {
    // 不同级进行处理
    return false;
  }
},
//拖拽后
sort(node, data, type) {
  const nextLabel = node.label;
  const dataArr = data.parent.childNodes;
  let cIndex = 0;
  let id = 0;
  let orderArrOld = JSON.parse(JSON.stringify([...data.parent.data]));
  let orderArr = [...data.parent.data];
  orderArr.forEach((item, index) => {
    item.Order = index + 1;
  });
  orderArr = orderArr.filter((item, index) => {
    console.log(item.Order !== orderArrOld[index].Order);
    if (item.Order !== orderArrOld[index].Order) return item;
  });

  const _node = data.parent.childNodes;
  const _length = _node.length - id;
  const _list = _node.slice(-_length);
  const _newsList = [];
  _list.forEach((item, index) => {
    _newsList.push({
      TName: item.label,
      TSearchId: cIndex + index + 1
    });
  });
  const types = 1;
  this.getSetorderData(node, data, nextLabel, _newsList, types); //接口传值，根据自己的需求来
}