ElementUI tree 非异步（增加，删除，上移，下移）

<template>
   <div class="border" style="overflow:auto;height:545px">
    <div class="table_title mb10">菜单树</div>
    <el-tree
      ref="tree"
      :key="key"
      :data="menuTreeData"
      node-key="id"
      :render-content="renderContent"
      :expand-on-click-node="false"
      :default-expanded-keys="defaultExpand"
      @node-click = 'getnodeinfo'
      :props="defaultProps"
    ></el-tree>
  </div>
</template>

<script>
export default {
  name: "menuTree",
  data() {
    return {
      key: 0,
      defaultExpand: [],
      menuTreeData: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  methods: {
    // 增加节点
    append(e,store,node,data) {
      e.stopPropagation() // 阻止冒泡
      var rootid = ''		
		  var addMenu = {
				"title" : "未命名菜单",
				"parentid" : data.id,
				"appid" : data.appid,
        		"rootid" : data.rootid,
			}
      this.loading = true
      // 此处调用添加节点的接口
      QueryPost("menuManage/insert", "传参").then(res => {
        this.loading = false
        const newChild = res.body.data.menuJson
        if (!data.children) {
          this.$set(data, 'children', [])
        }
        data.children.push(newChild)
        // 将新添加的节点信息传递给父组件
        this.$emit('listenToChildEvent',newChild)
      })
    },
    // 节点删除
    nodeDelete(e,node, data) {
      e.stopPropagation() // 阻止冒泡
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      if(data.hasOwnProperty('children') && data.children.length > 0){
        this.$message({type: 'warning',message: '存在子节点无法删除!'})
        return
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',center: true}).then(() => {
        this.loading = true
        // 点击确定后调用删除的接口
        QueryPost("menuManage/delete", " 传参 ").then(res => {
          this.loading = false
          children.splice(index, 1)
          this.$message({type: 'success',message: '删除成功!'})
        }).catch(() => {
          this.$message({type: 'info',message: '已取消删除'})
        })
      })
    },
    // 节点上移
    nodeUp(e,node, data) {
      e.stopPropagation() // 阻止冒泡
      const parent = node.parent
      const children = parent.data.children || parent.data
      const cIndex = children.findIndex(d => d.id === data.id)
      if (cIndex > 0) {
        var targetid = children[cIndex-1].id
      }else {
        this.$message({type: 'warning',message: '已置顶，无法上移！'})
      }
      this.loading = true
      QueryPost("menuManage/move","传参").then(res => {
        this.loading = false
        if ((parent.level == 0 && cIndex !== 0) || (parent.level !== 0 && cIndex !== 0)) {
          const tempChildrenNodex1 = children[cIndex - 1]
          const tempChildrenNodex2 = children[cIndex]
          this.$set(children, cIndex - 1, tempChildrenNodex2)
          this.$set(children, cIndex, tempChildrenNodex1)
          this.defaultExpand[0] = data.id
        }
        this.key++
      })
    },
    // 节点下移
    nodeDown(e,store, node, data) {
      e.stopPropagation() // 阻止冒泡
      const parent = node.parent
      const children = parent.data.children || parent.data
      const cIndex = children.findIndex(d => d.id === data.id)
      const cLength = children.length - 1; // 最边上的节点
      const allLevel = store.data.length - 1; // 树的深度
      if (cIndex < cLength) {
        var targetid = children[cIndex+1].id
      }else {
        this.$message({type: 'warning',message: '已置底，无法下移！'})
      }
      this.loading = false
      QueryPost("menuManage/move", "传参").then(res => {
        this.loading = false
        if ((parent.level === allLevel && cIndex !== cLength) || (parent.level !== allLevel && cIndex !== cLength)) {
          // 父节点相同
          const tempChildrenNodex1 = children[cIndex + 1]
          const tempChildrenNodex2 = children[cIndex];
          this.$set(children, cIndex + 1, tempChildrenNodex2)
          this.$set(children, cIndex, tempChildrenNodex1)
          this.defaultExpand[0] = data.id
        }
        this.key++
      })
    },
    // jsx渲染
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node" style="padding-right:15px">
          <span>{data.title}</span>
          <div class="btnbox">
            <i class="el-icon-plus mr10" on-click={(e) => this.append(e,store, node, data)} />
            <i class="el-icon-delete mr10" on-click={(e) => this.nodeDelete(e,node, data)} />
            <i class="el-icon-upload2 mr10" on-click={(e) => this.nodeUp(e,node, data)} />
            <i class="el-icon-download" on-click={(e) => this.nodeDown(e,store, node, data)} />
          </div>
        </span>
      )
    },
    // 向父组件传递节点数据
    getnodeinfo (data) {
      QueryPost("menuManage/queryByMenuId", "传参").then(res => {
        var data = this.lowerKey(res.body.data.data)
        this.$emit('listenToChildEvent',data)
      })
    },
    // json 数据转换为tree格式
    transDate(list,idstr,pidstr,children){  
      var result = [],temp = {};  
      for(var i = 0; i < list.length; i++){  
        temp[list[i][idstr]]=list[i]
      }  
      for(var j=0; j<list.length; j++){  
        var tempVp = temp[list[j][pidstr]];
        if(tempVp){ 
          if(!tempVp[children]) tempVp[children] = [];
          tempVp[children].push(list[j]);
        }else{  
          result.push(list[j]);
        }  
      }  
      return result;
    },
    // json key 转小写
    lowerKey(jsonObj) {
      for (var key in jsonObj) {
        jsonObj[key.toLowerCase()] = jsonObj[key];
        delete(jsonObj[key]);
      }
      return jsonObj;
    },
    // 初始化菜单方法
    init() {
      var datacenter = new commonParams()
      QueryPost("menuManage/query", "传参").then(res => {
        this.menuTreeData = this.transDate(res.body.data.menuJson,'id','parentid','children')
      })
    }
  },
  mounted() {
    // 初始化菜单数据
    this.init()
  }
}
</script>