vue2-org-tree 基于VUE的部门组织架构组件,增删节点实现
本文所用组件传送门:vue-org-tree
本文基于antd (其他前端组件框架操作基本都类似的: iview,elementui,boostrap-vue...)
当然,github上还有其他类似的组件,实现方法各有不同,显示效果也有差异,但都是很方便的组件。
看到网上有很多相关的使用教程,github上也写得很清楚,这里恕不在重复,本文主要实现增删节点。
场景:我们通常展示部门树的时候,简单的直接就是一个下拉框展示,为了显示明显,可能会使用一些树。
图片截至:(antd vue文档)
但是简单的树形已经很难满足变态的需求了。尽管做到tree已经很自然的显示了组织架构关系了。这个时候就需要更好看,更直接的显示方式了。
先预览一下vue2-org-tree 组件的样式:
显示效果非常不错了。层级关系清晰明了,而且支持节点开闭,手动配置样式等功能。
立马上手,照着官方案例搞了一个,嗯嗯,很不错,确实是大佬们想要的。
把玩一番,颇为得意,很轻松的解决了烦人的需求。果然天道酬勤,报应不爽啊,才懒一会儿,就被泼了凉水,因为我发现一个很让人绝望的问题。这个组件不支持扩展子节点。
是的,它只支持你把数据传进来,然后渲染出效果。然后点两下开关,横排竖排显示,没了。。。。。。刚开始认为这个组件不够全面,是的,至少支持增删的话。但是现在的前端开发,完全组件式开发。你需要飞机,就给你飞机,但是发动机,座位,机组人员,配套设施,都需要你自己去添加,因为你无法开发出一个完全适配所有配置的组件,如果你开发出来了,首先很牛,但是这个组件的库一定非常巨大,你需要适配的各种设施都在你的库里,你需要下载半小时的库包(虽然开玩笑,但确实库比较大加载是很费时的)。所以大家都趋于开发出一个小巧轻便的组件。
失望归失望,研究一番,发现组件提供的API里面有自定义渲染方式的prop:renderContent
既然支持自定义渲染方式,我传入一个jsx会怎么样呢?迅速找到antd的下拉菜单组件:
附上官方源码:
<template><a-dropdown :trigger="['click']"><a class="ant-dropdown-link" href="#">Click me <a-icon type="down" /></a><a-menu slot="overlay"><a-menu-item key="0"><a href="http://www.alipay.com/">1st menu item</a></a-menu-item><a-menu-item key="1"><a href="http://www.taobao.com/">2nd menu item</a></a-menu-item><a-menu-divider /><a-menu-item key="3">3rd menu item</a-menu-item></a-menu></a-dropdown> </template>
通过鼠标点击展开下拉菜单。点击子菜单可以实现不同的功能。我让每一个节点都是一个下拉菜单,不就可以了吗?把上面的代码改写成jsx形式,并写入renderContent 方法里,记得定义组件renderContent 属性哦。
renderContent (h, data) {return (<span><a-dropdown trigger={['click']}><a>{data.title}</a><a-menu slot="overlay" οnclick={(key) => this.onClick(key, data)}><a-menu-item v-show={data.level !== 0} key={'add'}>添加同级部门</a-menu-item><a-menu-item key={'addChild'}>添加下级部门</a-menu-item><a-menu-item key={'edit'}>修改部门</a-menu-item><a-menu-item key={'del'} >删除部门</a-menu-item ></a-menu ></a-dropdown ></span >)}
h不解释啦,就是jsx对象。data是我的数据,title是名称。onclick就是a元素的js事件,这里传递了下拉菜单的key,并用箭头函数指向自定义的onClick函数。
onClick (keyObj, node) {if (keyObj.key === 'del') {if (node.children && node.children.length > 0) {this.$message.info('当前部门存在子部门,请先删除子部门')} else {this.$http.get('/rdDept/del', { params: { id: node.value } }).then(res => {if (res.success && res.data) {this.$message.success('删除成功')this.loadTree()} else {this.$message.error(res.errorMessage)}})}} else {this.$refs.modifyDept.showModal(keyObj.key, node)}}
onclick里只处理了删除操作,并且存在子节点,就不进行删除。
先看下目前的效果:
视图完全没问题。操作下拉菜单:
正确响应。
写到这里,已经实现删除操作了。新增,修改操作其实已经呼之欲出了,定义一个输入框弹出层,这里就不贴具体代码了。
显示效果如下:
现在我们回到onClick方法的最后一行代码:
this.$refs.modifyDept.showModal(keyObj.key, node)
modifyDept是我新建的组件,showModal是组件的方法,key就是组件的下拉菜单key,node就是当前节点。我们来看下showModal方法:
showModal (key, data) {switch (key) {case 'edit':this.setDept(data.title, data.value, data.parentId, data.level, `修改[${data.title}]`, data.identity)breakcase 'add':this.setDept('', -1, data.parentId, data.level, `添加同级部门[${data.title}]`, data.identity)breakcase 'addChild':data.identity = data.identity === '' ? data.value : `${data.identity}:${data.value}`this.setDept('', -1, data.value, data.level + 1, `添加下级部门[${data.title}]`, data.identity)breakdefault:this.setDept('', -1, -1, 0, '添加研发部门', '')break}},setDept (name, id, parentId, level, title, identity) {this.form.setFieldsValue({ deptName: name })this.params.id = idthis.params.parentId = parentIdthis.params.level = levelthis.params.thisIdentity = identitythis.title = title}
根据传递过来的key确定操作,setDept方法设置当前操作的部门的树形。
this.params对象是传递到后台的对象。就是你想操作的对象。
this.form.setFieldsValue({ deptName: name }) 该方法来自antd form表单api,设置输入框deptName 的值。输入框代码如下:
<a-form :form="form"><a-form-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }"><a-input v-decorator="['deptName',{rules: [{ required: true, message: '请输入研发部门' }]}]" /> </a-form-item> </a-form>
接下来,你只需要写一个form的提交操作。把params对象传递了后台,然后由后台进行更新插入操作。然后刷新你的部门树,就实现增删功能了。
关键操作其实还是在jsx那段代码。你可以用jsx 做到你想要的任何效果。
The end!
转载于:https://www.cnblogs.com/BlueToWhite/p/11431453.html
vue2-org-tree 基于VUE的部门组织架构组件,增删节点实现相关推荐
- RDE-基于若依框架的部门组织架构导出项目
介绍 Ruoyi-Dept-Export项目简称RDE,是一款专用的[部门组织架构图导出]解决方案项目. 软件架构 项目依赖于若依框架前后端分离版(springboot+vue+mysql) 主要使用 ...
- iView 3.3.0 发布,基于 Vue.js 的企业级 UI 组件库
iView 3.3.0 发布了,代号 Transistor ,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品. 本次更新如下: https://www ...
- iView 3.4.0 发布,基于 Vue.js 的企业级 UI 组件库
百度智能云 云生态狂欢季 热门云产品1折起>>> iView 3.4.0 发布了,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品 ...
- 基于Vue.js的表格分页组件
转载自 基于Vue.js的表格分页组件 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...
- 关于数据分析部门组织架构的探讨
转载自:http://www.itongji.cn/article/0Z5100R012.html 理论上,BI分析部门有三种放法:放在技术部.放在其他部门(如财务).独立,三种做法各有利弊.下图是埃 ...
- 材料分享主题一:如何向上级汇报部门/组织架构
不管工作还是学习重在积累,俗话说'好记性,不如烂笔头',写在博客一方面为了加深思考进而提升能力,二是希望有缘人提出宝贵意见,共同学习共同进步,三是'坚持'. 主题一:如何向上级汇报部门/组织架构:适用 ...
- 基于vue的老虎机活动抽奖组件
slot-machine slot-machine 是一个基于vue框架的老虎机抽奖组件,安装即用! 看下demo效果图: 老虎机 组件相关地址 老虎机demo 关于自定义样式 考虑到不同项目的自 ...
- Mint UI —— 基于 Vue.js 的移动端组件库
写文章登录 Mint UI -- 基于 Vue.js 的移动端组件库 杨奕 8 个月前 Mint UI GitHub:https://github.com/ElemeFE/mint-ui 项目主页:h ...
- 移动端cube界面设计html,滴滴开源基于 Vue.js 的移动端组件库 cube-ui
原标题:滴滴开源基于 Vue.js 的移动端组件库 cube-ui 开源最前线(ID:OpenSourceTop) 猿妹 整编 综合自:https://didi.github.io/cube-ui/ ...
最新文章
- Log4j日志管理的用法
- OSI第四层:传输层功能及作用
- k8s组件说明:kubelet 和 kube proxy
- VTK:PolyData之ThresholdCells
- 百度php editor图片上传到其他盘,百度编辑器Editor图片独立上传
- Sharepoint学习笔记—Site Definition系列-- 3、创建ListDefinition
- [转载]大型网站架构演变和知识体系
- python查看运行内存占用_python中使用psutil查看内存占用的情况
- 软件项目质量管理经验谈
- LVDS原理及设计指南
- PowerDesigner逆向工程导入MYSQL数据库总结
- python的namedtuple
- 我的Delphi开发经验谈
- Hadoop安装教程_单机/伪分布式配置
- [Laravel] 如何使用PHP实现前端分页
- .net framework 3.5win10无法安装,一招解决win10无法安装.NET Framework 3.5
- 【华为机试真题 Python实现】九宫格按键输入【2022 Q1 Q2 Q3 |200分】
- TypeScript初始化
- 如何取悦自己或者增加自己幸福感的方式
- RGB 色值与十六进制色值互转
热门文章
- 大连医疗保险药物目录
- Scala 自身类型(self-type) 解析
- ChatGPT老板撒钱救难:百万美元帮硅谷银行受害公司,不要借条不用承诺,能还时再还...
- ASP.NET 母版页,内容页之间如何传参数
- spfa(链式前向星)+dijkstra(链式前向星)
- 做甘特图的,倒闭了。难道勿谓言之不预?
- Chrome拓展(插件)入门篇
- 一键启动多程序BAT脚本
- Android studio 出现错误Run with --stacktrace option to get the stack trace. Run with --info or --debug o
- threejs加载图片需创站与 如何写出字体