怎么在vue中使用Element构建一个自定义树-创新互联

这期内容当中小编将会给大家带来有关怎么在vue中使用Element构建一个自定义树,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

成都创新互联服务紧随时代发展步伐,进行技术革新和技术进步,经过十载的发展和积累,已经汇集了一批资深网站策划师、设计师、专业的网站实施团队以及高素质售后服务人员,并且完全形成了一套成熟的业务流程,能够完全依照客户要求对网站进行成都做网站、成都网站建设、建设、维护、更新和改版,实现客户网站对外宣传展示的首要目的,并为客户企业品牌互联网化提供全面的解决方案。

控件使用

概要

  • 基于element-ui树形控件的二次封装

  • 提供编辑、删除节点的接口

  • 提供一个next钩子,在业务处理失败时可使用next(false)回滚操作

  • 控件源码见 github

文档

props

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

events

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

源数据描述

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

调用示例

 

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)
   }
  })
}

实现方式

构建子节点的模板

 
  
   
   
   
   {{node.label}}
  
  
   确认
   取消
  
  
    
    
    
  
 

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

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

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

  
  
  //子节点模板
  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)
      }
     }
    })
   }

上述就是小编为大家分享的怎么在vue中使用Element构建一个自定义树了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


新闻名称:怎么在vue中使用Element构建一个自定义树-创新互联
文章链接:http://pwwzsj.com/article/djpphc.html