JavaScript

超轻量级php框架startmvc

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

更新时间:2020-06-06 18:18:01 作者:startmvc
说明做项目的时候要使用到一个自定义的树形控件来构建表格树,在github上搜了一下没有搜

说明

做项目的时候要使用到一个自定义的树形控件来构建表格树,在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

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

vue Element构建树 vue Element
基础信息
请求
SQL查询
加载文件
配置
错误
总耗时: 68.68ms 内存: 102.27KB
请求方法: GET
请求URI: /article_27734.html
控制器: index
方法: index
PHP版本: 8.0.26
服务器: nginx/1.24.0
GET参数
无GET参数
POST参数
无POST参数
请求头
Cookie: PHPSESSID=k7vh77agompm7te8d6675p0ccg
Accept-Encoding: gzip, br, zstd, deflate
User-Agent: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
Accept: */*
Host: startmvc.com
Content-Length:
Content-Type:
Cookie
PHPSESSID: k7vh77agompm7te8d6675p0ccg
SELECT id,name FROM sm_article_category 0.00ms
SELECT a.id,a.category_id,a.title,a.keywords,a.description,a.update_time,ac.content FROM sm_article as a JOIN sm_article_content as ac ON ac.article_id = a.id WHERE a.id = '27734' LIMIT 1 0.00ms
SELECT tag_id FROM sm_tag_article WHERE article_id = '27734' 0.03ms
select id,title from sm_article where id in (select article_id from sm_tag_article where tag_id=8888) and status=1 order by id desc limit 20 0.00ms
总计:4 条SQL语句 总耗时:0.03 ms
1. /www/wwwroot/startmvc.com/public/index.php
2. /www/wwwroot/startmvc.com/startmvc/boot.php
3. /www/wwwroot/startmvc.com/startmvc/function.php
4. /www/wwwroot/startmvc.com/vendor/autoload.php
5. /www/wwwroot/startmvc.com/vendor/composer/autoload_real.php
6. /www/wwwroot/startmvc.com/vendor/composer/platform_check.php
7. /www/wwwroot/startmvc.com/vendor/composer/ClassLoader.php
8. /www/wwwroot/startmvc.com/vendor/composer/autoload_static.php
9. /www/wwwroot/startmvc.com/startmvc/core/Config.php
10. /www/wwwroot/startmvc.com/config/common.php
11. /www/wwwroot/startmvc.com/startmvc/core/Session.php
12. /www/wwwroot/startmvc.com/startmvc/core/App.php
13. /www/wwwroot/startmvc.com/startmvc/core/Exception.php
14. /www/wwwroot/startmvc.com/function/custom_function.php
15. /www/wwwroot/startmvc.com/function/global_function.php
16. /www/wwwroot/startmvc.com/startmvc/core/Request.php
17. /www/wwwroot/startmvc.com/startmvc/core/Middleware.php
18. /www/wwwroot/startmvc.com/startmvc/core/Router.php
19. /www/wwwroot/startmvc.com/config/route.php
20. /www/wwwroot/startmvc.com/app/home/controller/ArticleController.php
21. /www/wwwroot/startmvc.com/app/common/BaseController.php
22. /www/wwwroot/startmvc.com/startmvc/core/Controller.php
23. /www/wwwroot/startmvc.com/startmvc/core/Loader.php
24. /www/wwwroot/startmvc.com/startmvc/core/View.php
25. /www/wwwroot/startmvc.com/config/view.php
26. /www/wwwroot/startmvc.com/startmvc/core/Db.php
27. /www/wwwroot/startmvc.com/config/database.php
28. /www/wwwroot/startmvc.com/startmvc/core/db/DbCore.php
29. /www/wwwroot/startmvc.com/startmvc/core/db/DbInterface.php
30. /www/wwwroot/startmvc.com/runtime/temp/home/article/detail.php
31. /www/wwwroot/startmvc.com/startmvc/core/tpl/trace.php
总计:31 个文件
系统配置
运行环境: development
调试模式: 开启
时区设置: Asia/Shanghai
最大执行时间: 300秒
内存限制: 128M
上传限制: 50M
POST限制: 50M
字符集: UTF-8
错误报告级别: 32759
缓存状态
APC: 不可用
Memcached: 不可用
Redis: 不可用
OPcache: 可用
XCache: 不可用
File Cache: 可用
Autoload: 1 个加载器
Session: 已激活
框架配置
session: [Array]
trace: 1
debug: 1
default_controller: Index
default_action: index
异常信息
未捕获到异常
错误信息
未发现错误
应用运行正常,未发现错误或异常
68.68ms