验证实现element-ui树形控件的自定义图标及右键菜单
许久不用,element-ui已经更新至2.4.1版本。直接进入今天的正题,前提是node.js的环境还有vue及elment-ui都已经安装。由于element-ui的官方文档中介绍比较粗略,试了许久才成功,因此将其记录。(PS:属性控件的另一个开源插件库有Z-tree,功能较为丰富)
首先看到自定义节点内容部分,指明了可以在节点区添加按钮或图标。
一 添加节点自定义图标
但所有的实例中却没有看到有图标,自定义部分只有通过按钮增加/删除节点。于是在线运行该实例,在数据项中添加icon,于html中引用,成功了:
HTML:
div id="app">
<div class="block">
/* 自定义节点的有两种方法,直接通过slot-scope实现,就不再捣腾另一种方法了,想必也是大同小异 */
<p>使用 scoped slot</p>
<el-tree :data="data5" node-key="id" default-expand-all :expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span> <i :class="node.icon"></i>{{ node.label }}</span>
<span>
<el-button type="text" size="mini" @click="() => append(data)">
Append
</el-button>
<el-button type="text" size="mini" @click="() => remove(node, data)">
Delete
</el-button>
</span>
</span>
</el-tree>
</div>
</div>
JS:
data() {
const data = [{
id: 1,
icon:"el-icon-delete",
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
icon:'el-icon-info',
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}];
return {
data5: JSON.parse(JSON.stringify(data))
}
}, methods: {
append(data) {
console.log("当前data为:",data);
const newChild = { id: id++, label: 'testtest', children: [] };
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
}, remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
}
}
CSS:
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
通过数据项来添加,不同的节点都可设置个性图标。同样数据源的动态变化也可以动态生成资源树。
二 右键事件实现右键菜单项
查看Tree树形组件的属性、方法及事件说明,支持node-click节点点击事件,还有node-contextmenu右键点击触发的事件。
1. 右键事件的参数为:event、data属性数组中节点所对应的对象、节点对应的Node及节点组件本身。看起来比较抽象,我们绑定实现一个右键事件,打印出对应的参数看一看就知道了。
在上图的资源树上,当点击“一级1”节点时,打印输出参数:
粗略知道参数1,是一个点击事件,包括了点击的位置信息;参数2是一个对象;后面两个参数也是一个对象。我们详细的展开四个参数具体内容:
参数1
MouseEvent中包含的有是否冒泡、相对于浏览器及页面的点击位置等等。右键菜单很明显我肯定要用到位置参数。
参数2
然后可以看到当前节点所对应的node,本身的icon,id及label,此外还有子节点信息children,可以看到有一个——二级1-1(包括它的id、label等),且子节点下还有两个子节点,及设置节点的一些原生方法。
参数3
这里则是被点击当前树形节点的本质属性,包括是否有选择框checked、data、是否展开expanded及id等,其中用红线圈出的几个地方我觉得是比较有用的,我们可以通过判断是否是子节点及节点的层级,定义不同层级或者节点的不同行为。例如,可能我们的右键菜单只在某些资源树节点上有用。
参数4(没有深究,暂时没有用到)
2. 前面不是还发现了节点的点击事件node-click,于是猜想node-click和node-contextmenu冲突,点击右键的时候会不会也出发了node-click。验证之后发现担心是多余的,node-click只是针对于鼠标左键,因为点击右键时node-click事件并没有被触发。
在HTML中添加菜单项:
<div v-show = "menuVisible">
<ul id = "menu">
<li tabindex="-1" class="menu__item" id="menu-4994-1-0">Axure Components</li>
<li tabindex="-1" class="menu__item" id="menu-4994-1-1">Sketch Templates</li>
<li tabindex="-1" class="menu__item" id="menu-4994-1-2">组件交互文档</li>
</ul>
</div>
且在vue数据项中定义menuVisible:false,el-tree上绑定node-contextmenu事件,在js中实现如下:
rihgtClick(event,object,value,element){
if(value.level == 1){
this.menuVisible = true;
let menu = document.querySelector("#menu");
/* 菜单定位基于鼠标点击位置 */
menu.style.left = event.clientX + 20 + "px" ;
menu.style.top = event.clientY -10 + "px";
} console.log("右键被点击的event:",event);
console.log("右键被点击的object:",object);
console.log("右键被点击的value:",value);
console.log("右键被点击的element:",element); },
于是只有在点击一级节点时,右键才会出现菜单项。正如上图中所验证的一样,点击二级节点时,我们可以看到打印信息位置明显在下面且没有出现菜单项。(PS:由于还没有做菜单的隐藏,所以点击二级节点时,之前的菜单还是存在于原来的位置^ ^)
验证实现element-ui树形控件的自定义图标及右键菜单的更多相关文章
- element ui 时间控件 多个日期
前言:工作中用到 vue+element ui 的前端框架,需要使用时间控件来选择多个日期,已月日的形式,且有默认值,所以记录一下.转载请注明出处:https://www.cnblogs.com/yu ...
- 微信小程序地图控件篇 ---自定义图标被地图覆盖的问题
今天在做微信小程序的时候遇到这个这样的问题 需要在地图上加个一个自定义的图标控件 类似这样的 刚开始的时候怎图片一直会被地图组件覆盖 ,要怎么解决这个问题 我去翻了下小程序的文档 有个cover ...
- vue+element tree(树形控件)组件(1)
最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间用到的知识点. 首先说说需求,就是点击出现弹窗+蒙板,弹窗内容是一 ...
- vue+element tree(树形控件)组件(2)
今天记录组件的代码和一个调用它的父组件的代码,接口接收数据直接传element直接能用的,也就是经过上一章函数处理过的数据以下是代码 父组件 <template> <commonfi ...
- element ui 日期控件范围时间限制记录、以及计算两个日期之间的天数
日期的筛选经常会有最小的日期选择,例如:当前日期 :clearable="false" :picker-options="pickerOptions0" val ...
- Qt组件(例如按钮、树形控件)上响应鼠标右键
ui->textEdit->setContextMenuPolicy(Qt::CustomContextMenu); connect(ui->textEdit,SIGNAL(cust ...
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
- Element ui 使用 Tree 树形控件
使用树形控件需要映入 jsx才能运行链接:https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage npm install\ babe ...
- 关于elment-ui树形控件Tree的使用
如果简单使用的tree树形控件,按照Element ui Tree 树形控件 官方文档使用即可,基本上能够完成大部分的需求. 但是如果需要对树形结构进行额外操作,仅仅根据官方文档提供的方案的话,可能就 ...
随机推荐
- python模块学习(一)
模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才 ...
- IDEA 跑spring项目找不到get,set的问题
@Autowired的用法和作用 这个注解就是spring可以自动帮你把bean里面引用的对象的setter/getter方法省略,它会自动帮你set/get. iDEA下安装lombok这个插件就可 ...
- 【转】api网关
微服务之API网关 一.引言 随着互联网的快速发展,当前以步入移动互联.物联网时代.用户访问系统入口也变得多种方式,由原来单一的PC客户端,变化到PC客户端.各种浏览器.手机移动端及智能终端等.同时系 ...
- mysql启动报错“NET HELPMSG 3534“的解决办法
原因: mysql安装步骤错误,从mysql5.7.6开始,mysql需要这样安装: mysqld --initialize-insecure或者mysqld --initialize mysqld ...
- 解读mysql主从配置及其原理分析(Master-Slave)
在windows下配置的,后面会在Linux下配置进行测试,需要配置mysql数据库同步的朋友可以参考下. 1.在主数据库服务器为从服务器添加一个拥有权限访问主库的用户:GRANT REPLICATI ...
- 使用Compute Engine工具连接Linux VM
Links: Connecting to Linux Instances 内容: 要连接Linux VM实例,必须要有一个SSH(Secure Shell)秘钥.无论何时连接一个LinuxVM实例(通 ...
- request doesn't contain a multipart/form-data or multipart/mixed stream ……
有文件控件"file"的表单,在提交的时候,直接使用了ajax提交,结果报了一堆错,原来这个东东要提交表单,还要用post方式,最后更改为: $("#saveForm&q ...
- mysql分组查询报错
执行sql group by查询时报错 SELECT id from userz GROUP BY username Expression #1 of SELECT list is not in GR ...
- staticmethod
python staticmethod 返回函数的静态方法. 该方法不强制要求传递参数,如下声明一个静态方法: class C(object): @staticmethod def f(arg1, a ...
- select + range + insertNode+offset
self. cmd.range.selectNodeContents(p[0]) 建立选区 self.cmd.select() 选中选区 self.cmd.selection([forceRe ...