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


Posted in Javascript onSeptember 19, 2017

说明

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

控件演示

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

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 子节点数据

调用示例

<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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript getElementsByClassName函数
Apr 01 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
给js文件传参数(详解)
Jul 13 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
vue如何从接口请求数据
Jun 22 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 #Javascript
详解ES6之async+await 同步/异步方案
Sep 19 #Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 #jQuery
jquery实现倒计时小应用
Sep 19 #jQuery
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 #Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 #jQuery
jQuery选择器之表单元素选择器详解
Sep 19 #jQuery
You might like
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
.htaccess文件保护实例讲解
2011/02/06 PHP
php header Content-Type类型小结
2011/07/03 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
vue中的scope使用详解
2017/10/29 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python定时执行之Timer用法示例
2015/05/27 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
python创建学生管理系统
2019/11/22 Python
python的数学算法函数及公式用法
2020/11/18 Python
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
支教自我鉴定
2014/01/18 职场文书
服务员岗位职责
2015/02/03 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书