element tree的开发使用
element tree的开发使用
1.树的插槽,实现右边点击三个点打开操作的效果
<div class="el-tree-box"><el-treeclass="filter-tree":data="data":props="defaultProps"@node-click="nodeClick"default-expand-allnode-key="orgId":filter-node-method="filterNode"ref="tree":expand-on-click-node="false"><span class="custom-tree-node" slot-scope="{ node, data }"><!-- <span>{{ node }}</span> --><span class="em-tree-text" :title="node.label">{{ node.label }}</span><spanclass="operation"v-if="node.level < 9"@click.stop="operationClick(node, data, $event)">···</span></span></el-tree></div>
2.三个点全部靠右,并且超出盒子时会显示…并且鼠标移入有完整节点信息(默认是贴着左侧节点名称,通过修改css实现)
实现方式:html
<span class="custom-tree-node" slot-scope="{ node, data }"><!-- <span>{{ node }}</span> --><span class="em-tree-text" :title="node.label">{{ node.label }}</span><spanclass="operation"v-if="node.level < 9"@click.stop="operationClick(node, data, $event)">···</span></span>
css:
.custom-tree-node {display: flex;flex: 1;width: 100%;align-items: center;justify-content: space-between;padding-right: 10px;position: relative;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;.em-tree-text {display: inline-block; //block一样overflow: hidden;white-space: nowrap;width: 100%;text-overflow: ellipsis;}}
知识点:鼠标移入有完整节点信息是利用了span的:title属性,只要绑定了,鼠标移入就会有提示
参考网址:https://www.cnblogs.com/LindaBlog/p/11136712.html , https://www.cnblogs.com/leah-blogs/articles/15987330.html
3.更改前方图标展开和收起的图标
html:(只是为了加上el-tree-addordel这个类)
<el-tree:data="treeData":props="defaultProps"class="el-tree-addordel"node-key="id"default-expand-allkey="1"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span class="operation"><el-radio-group v-model="data.isPublic" @change="changeMenuData(node, data)"><el-radio :disabled="data.disabled" :label="true">公开</el-radio><el-radio :label="false">禁止</el-radio></el-radio-group></span></span></el-tree>
css:(加了el-tree-addordel这个类的tree展开和收起是 + - 号 ,没加这个类的还是默认的ˇ)
.el-tree-addordel {// 更换+ - 图标.el-tree-node__expand-icon.expanded {-webkit-transform: rotate(0deg) !important;transform: rotate(0deg) !important;}.el-icon-caret-right:before {// 加号图片content: url('../assets/img/tree-add.png') !important;font-size: 16px;}.expanded:before {// 减号图片content: url('../assets/img/tree-del.png') !important;font-size: 16px;}.is-leaf.el-tree-node__expand-icon.el-icon-caret-right:before {content: '' !important;font-size: 16px;}
}
参考地址:https://segmentfault.com/a/1190000020133617
4.树形组件tree的每一行与单选框做绑定
<el-tree:data="treeData":props="defaultProps"class="el-tree-addordel"node-key="id"default-expand-allkey="1"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span class="operation"><el-radio-group v-model="data.isPublic" @change="changeMenuData(node, data)"><el-radio :disabled="data.disabled" :label="true">公开</el-radio><el-radio :label="false">禁止</el-radio></el-radio-group></span></span></el-tree>
注意点,这里跟单选框绑定之后,会直接去修改你tree绑定的data。并且v-model应该与slot中的data绑定而不是node,否则会报错(element tree中node不可更改)
5.element-tree默认选中第一个节点(js代码实现)
authOrgListWithTree().then((res) => {this.data = resif (res.length > 0) {//'nextTick()' 下次dom更新时触发回调函数//默认点击this.$nextTick().then(() => {const firstNode = document.querySelector('.el-tree-node')firstNode.click();if (this.filterText) {this.$refs.tree.filter(this.filterText);}})}})
参考地址:https://blog.csdn.net/qq_42307369/article/details/106386730
6.在一个页面新建成功后回来还是点击的该节点
业务场景:比如选中了一个树节点,点击了新建在改节点下去新建一个用户,新建完成之后回来,该树节点应该还是保持选中状态(比如我这里选择了网安监督组,新建进入到新建页面,回来之后选中的依然应该是网安监督组。)
我这里是抽成了一个方法。如果有选中的节点currentNodeData,那么新建成功就回去找到这个节点并且选中,没有的话,就默认选中第一个节点。利用的是element-tree的setCurrentKey方法( 通过 key 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性 ,保证树节点唯一性 )
js:
backToOriginTreeStatus () {this.$refs.tree.setCurrentKey(this.currentNodeData !== '' ? this.currentNodeData.orgId : this.data[0].orgId)this.$nextTick(() => {document.querySelector(".is-current").firstChild.click()})},
参考网址:https://blog.csdn.net/qq_37548296/article/details/108664219
7.element-tree修改选中的背景颜色
.el-tree {background: transparent !important;color: #c0d0e7 !important;.el-tree-node__content{height: 32px;.el-checkbox.is-disabled{display: none !important;}}.el-tree-node__content:hover {background-color: #3e4c64 !important;}.el-tree-node:focus > .el-tree-node__content {background-color: #3e4c64 !important;}.el-tree-node.is-current > .el-tree-node__content {background-color: #3e4c64 !important;}// 禁用的颜色.el-checkbox__input.is-disabled .el-checkbox__inner {background-color: red !important;display: none !important;}
}
https://blog.csdn.net/ywy_wc/article/details/88617702
8.编辑时树节点回显(点击列表中的编辑,会打开弹框,树中会显示该用户的角色)
利用element中的setCheckedKeys方法( (keys, leafOnly) 接收两个参数,1. 勾选节点的 key 的数组 2. boolean 类型的参数,若为 true
则仅设置叶子节点的选中状态,默认值为 false
)。
注意点:该方法第一个参数一定是个数组,哪怕是你要回显一个选中的,你都要包装成数组。另外就是需要设置node-key属性保证节点的唯一性
9.只有角色前面才有选择框,部门前面没有选择框。(js配合css实现)
思路:首先给el-tree加上show-checkbox这个属性显示所有的选择框,其次在返回的要绑定的数据:data=“popTreeData”,对该数据做处理,将类别时部门的全部加上 disabled:true这个属性。此时页面上就会有两种选择框(一个可选,一个不可选)。最后利用css将这个不可选的选择框的display改为none
js处理的就不贴出来了,就是一个递归处理数据的过程。
css:
.el-tree {// 禁用的颜色.el-checkbox__input.is-disabled .el-checkbox__inner {background-color: red !important;display: none !important;}
}
10.只有叶子节点(最底层没有children的)才显示多选框
.el-tree-node {.is-leaf + .el-checkbox .el-checkbox__inner {display:inline-block;}.el-checkbox__input> .el-checkbox__inner {display:none;}
}
11.叶子节点单选,只能选择一个树节点。
参考网址:https://www.it610.com/article/1297066866610610176.htm
与z-tree的使用感受:element-tree抽出来的东西用起来比较顺手,但是很多地方就是没办法更改的,这个没办法。z-tree就是基本上能看到的都有api给你去改。但是使用比较麻烦,得把jq的改成vue的。如果业务树组件不太复杂,element-tree能满足需求还是尽量使用element-tree。如果满足不了的话,那就上z-tree
element tree的开发使用相关推荐
- Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加.删除和修改 最近在搞erp项目对应后台的管理功能,为了加速开发使用了 vue-element-admin 开发,使用的是e ...
- 使用Element进行前端开发
本文介绍如何使用vue-element-admin+element进行前端开发. 我们可以使用element组件很方便的进行前端开发,并且每个组件都已经提供了对应的代码,只需要复制我们需要的功能即可. ...
- SAP UI5 应用开发教程之五十六 - SAP UI5 树控件(tree)的开发试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- vue+element tree(树形控件数据格式)组件(1)
vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间 ...
- element tree 如何全部展开、全部折叠
element tree 如何全部展开.全部折叠 一.全部展开 只需要将每个父节点的 id 放到 defaultExpendKeys 数组中即可 <el-treeclass="tree ...
- Element tree清空树
Element tree清空树 第一步清空树绑定的data 第二步清空树node 执行第一步 执行第二步 第一步清空树绑定的data 第二步清空树node <el-treeclass=" ...
- 下拉框_教你封装 Element Tree 树状下拉框
在日常项目开发中,树状下拉框的需求还是比较常见的,但是element并没有这种组件以供使用.在这里,小编就基于element如何封装一个树状下拉框做个详细的介绍. 通过这篇文章,你可以了解学习到一个树 ...
- 实验管理系统springboot+vue+element ui项目开发
实验管理系统 某学院实验老师长期采用人工的形式完成药品试剂的入库.查询.出库的流程.但这种方式存在诸多问题和不便: 1. 在仓库运行流程中效率不高,容易出错. 2. 管理人员不能方便的了解每种物品的状 ...
- element tree不刷新视图_不懂Linux Device Tree,被新人嘲笑之后,含泪写完
1 前言 关于设备树,之前就已经接触过很久了,但是本着够用的原则,基本上都是看着文档CRUD,处于一种不求甚解的状态,没有进行全面性的总结,导致很多知识点都是比较碎片状,没有形成一个系统的知识网络,最 ...
最新文章
- php error 关闭,php error_reporting()关闭报错
- 数据结构 python的书推荐-java数据结构书一般推荐看什么好?
- Redis key 相关命令
- php判断访客语言,php实现获取及设置用户访问页面语言类
- 智慧城市需要百姓智慧
- 也谈ORACLE备份与恢复
- Chrome 74 稳定版发布,Windows 10 支持黑暗模式
- 租号平台正在把“未成年”变成“大人”
- linux内存管理实验,Linux内存管理机制研究
- linux下载上传速度查看
- 查看 IntelliJ IDEA 符号在插入符号上的定义
- Android Studio 开发 C盘减肥
- Android进阶之路 - keyStore、jks签名证书相互转换
- 虚拟化做快照需要停服务器么,如何创建VMware虚拟化快照和快照删除的方法
- 多个路由器相连接的方式(以及配置成交换机的方式)
- 常见计算机蓝屏代码,码住!常见电脑蓝屏代码和解决方法
- 常见的手机端头部banner切换代码设置
- linux安装tesseract支持tess4j图片识别
- Handshake - DNS域名系统的搅局者
- Maven下载安装及repository路径修改
热门文章
- dpdpdpdpdpdp
- R导入CVS.文件报错Error in data[[rowvar]] : attempt to select less than one element in get1index
- 同态滤波-利用高斯滤波器处理曝光过度的图片(matlab)
- javascript经典特效(二)
- pl/sql:oracle13(跟着宝哥学java:oracle系列:全网最全):pl/sql语法、pl/sql流程控制
- java 注入依赖_依赖注入(Dependency Injection)
- 解决“yyyy-MM-ddTHH:mm:ss+mm:ss” 格式日期转成Date类型
- python绘制月亮_10分钟python图表绘制 | seaborn入门(三):Boxplot与Violinplot
- 一个不错的看电影的地方
- mysql Your password does not satisfy the current policy requirements