本篇文章主要介绍了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>
  <span @click="Expanded">
   <Input v-if="node.status == 1" 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 size="small" type="success" icon="checkmark-circled" @click="SaveEdit">确认</Button>
   <Button size="small" type="ghost" icon="checkmark-circled" @click="CancelEdit">取消</Button>
  </span>
  <span>
    <Icon v-if="node.status == 0" color="gray" type="edit" size="16" @click.native="OpenEdit"></Icon>
    <Icon v-if="node.status == 0" type="plus-round" color="gray" size="16" @click.native="Append"></Icon>
    <Icon v-if="node.status == 0&&node.children.length < 1" type="ios-trash" color="red" size="18" @click.native="Delete"></Icon>
  </span>
 </span>

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

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

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

  <el-tree
  
  
   :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

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

最新资讯
嫦娥五号将择机着陆月球!

嫦娥五号将择机着陆月

11月30日,探月工程嫦娥五号任务飞行控制团队按计划实施
台湾环球晶圆将收购德国圆晶制造商Siltronic  开价45亿美元

台湾环球晶圆将收购德

据报道,德国圆晶制造商Siltronic发表声明称,它正在与台
阿里腾讯洽谈收购暂缓,爱奇艺不是想买就能卖的

阿里腾讯洽谈收购暂缓

腾讯阿里虽然目前可能暂时放弃受让百度的爱奇艺股权,但
雷军撕不掉小米标签

雷军撕不掉小米标签

2020年,小米迈入了成立的第十个年头,也是它要面临改变的
泡泡玛特,不只是盲盒

泡泡玛特,不只是盲盒

潮流易逝、复制难成功,潮玩企业的长存之道,只能留给泡泡
收购Slack,贝尼奥夫的“社交企业”梦近在咫尺 | 海外周选

收购Slack,贝尼奥夫的

最重要的是,在与微软为敌的过程中,Slack可以为Salesforc
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,