vue基于Element构建自定义树的示例代码

<Button style="margin-left: 8px;" size="small" type="ghost" icon="checkmark-circled" @click="CancelEdit">取消</Button>
</span>
<span class="span_icon">
<Icon v-if="node.status == 0" style="margin-left: 8px" color="gray" type="edit" size="16" @click.native="OpenEdit"></Icon>
<Icon v-if="node.status == 0" style="margin-left: 8px" type="plus-round" color="gray" size="16" @click.native="Append"></Icon>
<Icon v-if="node.status == 0&&node.children.length < 1" style="margin-left: 8px" type="ios-trash" color="red" size="18" @click.native="Delete"></Icon>
</span>
</span>

子节点通过$emit通知父节点事件

SaveEdit(){
  //保存节点事件
  this.$emit('SaveEdit',this.nodeData)
},

父节点核心实现，使用renderContent函数加载子节点模板，点击保存节点时将业务参数保存在runParam中用于在业务操作失败（网络请求失败、服务端异常等情况）的数据回滚

  <el-tree
   class="filter-tree"
   style="overflow:auto;"
   :data="treeData"
   :filter-node-method="filterNode"
   @node-click="handleNodeClick"
   ref="tree"
   node-key="value"
   :expand-on-click-node="false"
   :render-content="renderContent"
   default-expand-all>
  </el-tree>
  //子节点模板
  renderContent(h, { node, data, store }) {
    return h(TreeItem,{
     props:{
      value:data,
      treeNode:node
     },
     on:{
      input:(node)=>{
       data = node
      },
      Append: () => {
       node.expanded = true
       data.children.push({ value: this.$utilHelper.generateUUID(), label: '请输入模块名称', children: [],status:1,isAdd:true })
      },
      //保存节点
      SaveEdit:(nodeData)=> {
       //递归查找父节点
       var parentNode = this.$utilHelper.getNode(this.treeData,data.value).parentNode
       this.runParam.parentNode = parentNode
       this.runParam.data = data
       this.runParam.nodeData = nodeData
       this.$emit('SaveEdit',parentNode,data,this.CanSaveNext)
      }
     }
    })
   }

操作结果钩子，如果next函数传入false则判定操作失败，使用runParam中的参数进行回滚，该节点的编辑保存操作将无效

源码demo：calebman/vue-DBM