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

说明

做项目的时候要使用到一个自定义的树形控件来构建表格树，在github上搜了一下没有搜索到合适的（好看的）可以直接用的，查看element的组件说明时发现它的tree控件可以使用render来自定义节点样式，于是基于它封装了一个可以增、删、改的树形组件，现在分享一下它的使用与实现。

控件演示

github上挂的gif可能会比较卡，有没有大佬知道还有哪里可以挂静态资源的，谢谢。。！

控件使用

概要

• 基于element-ui树形控件的二次封装
• 提供编辑、删除节点的接口
• 提供一个next钩子，在业务处理失败时可使用next(false)回滚操作
• 控件源码见 github

文档

props

属性	说明	类型
value	源数据，可使用v-model双向绑定	array

events

事件名	说明	参数
saveedit	点击编辑或者添加树节点后的保存事件	(父节点数据、当前节点数据、next)
delnode	删除节点事件	(父节点数据、当前节点数据、next)
nodeclick	节点点击事件	(当前节点数据)

源数据描述

属性	说明
value	树节点的唯一标识
label	树节点的显示名称
status	(1：编辑状态)(0：显示状态)(-1不可编辑状态)
children	子节点数据

调用示例

 <m-tree
  v-model="tabletree"
  @saveedit="saveedit"
  @delnode="delnode"
  @nodeclick="handlenodeclick"></m-tree>

saveedit(parentnode,data,next){
  var param = {
   parentnode:parentnode,
   node:data
  }
  this.$http.post(url,param).then((response) => {
   if(response.status == 200){
    next(true,response.body.data.nodeid)
   }else{
    next(false)
   }
  })
}

实现方式

构建子节点的模板

 <span class="span_item">
  <span @click="expanded">
   <input v-if="node.status == 1" style="width: 100px;" v-model="node.label" size="small" ></input>
   <icon v-if="node.status == 0" type="asterisk"></icon>
   <icon v-if="node.status == -1" type="ios-keypad-outline"></icon>
   <span v-if="node.status != 1">{{node.label}}</span>
  </span>
  <span v-if="node.status == 1">
   <button style="margin-left: 8px;" size="small" type="success" icon="checkmark-circled" @click="saveedit">确认</button>
   <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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。