关于elment-ui树形控件Tree的使用
如果简单使用的tree树形控件,按照Element ui Tree 树形控件 官方文档使用即可,基本上能够完成大部分的需求。
但是如果需要对树形结构进行额外操作,仅仅根据官方文档提供的方案的话,可能就不太够了,需要我们更深入的研究树形控件。
关于树形结构的增删改查操作,官方提供了append和remove两个方法,可以很方便的实现添加节点和删除节点,关键还有一个重命名的操作,并没有提供直接的方法,那就需要我们去变通。
以下提供两个方案:
1、利用append方法
官方说明:
说提供两个参数,但是经过验证
<el-button type="text" size="mini" icon="el-icon-edit" @click.stop.prevent="() => append(node, data)">重命名</el-button>
所以需要为当前节点进行重命名的时候,可以依赖parentNode参数,获取父节点,然后操作就类似于为当前节点添加子节点差不多了,需要注意的是:
添加节点,是对当前节点的子节点children通过数组方法push,或者unshift;
重命名节点,是对当前节点的父节点的子节点children通过数组方法splice替换当前节点,需要先确定当前数据在该数组中的index
const index = children.findIndex(d => d.cId === data.cId);
然后才可以 $parants.nodes.splice(i, 1, item),其实也就是在该节点的父节点中找到子节点的数组,然后确定该数据在子节点数组中的位置,修改名称,利用splice在数组中进行替换。
2、利用getNode方法
<el-button type="text" size="mini" icon="el-icon-edit" @click.stop.prevent="() => renameTreeNode(data)"></el-button>
renameTreeNode(data){
this.$prompt('', '通过getNode分组重命名', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValue: data.name,
inputValidator: function(val){
return val.trim() != "" ? true : "分组名称不能为空";
},
inputPlaceholder:"请输入重命名组名称"
}).then(({ value }) => {
let dataNode = this.$refs.tree.getNode(data.cId);
this.$set(dataNode.data, "name", value)
})
}
其实关键点在于 let dataNode = this.$refs.tree.getNode(data.cId);获取到当前树节点之后,也就是设置其name值了,反倒没有什么好说的了。
通过上述两种方案,其实可以看出来,必然还有其他方案可以实现。
主要明白elment-ui官方文档上面关于方法和Events怎么使用,基本上能够玩出各种花样来的。
Events也就是在template上面可以使用v-on绑定的,与click之类的使用方法一致,而方法,事实上也就是@click=“getData”这里面的getData,但是除了这种调用该方法的方案外,还可以通过this.$refs[refName].getData()的方法在javascript中调用。
关于elment-ui树形控件Tree的使用的更多相关文章
- VS2010/MFC编程入门之三十一(常用控件:树形控件Tree Control 下)
前面一节讲了树形控件Tree Control的简介.通知消息以及相关数据结构,本节继续讲下半部分,包括树形控件的创建.CTreeCtrl类的主要成员函数和应用实例. 树形控件的创建 MFC为树形控件提 ...
- VS2010/MFC编程入门之三十(常用控件:树形控件Tree Control 上)
前面两节为大家讲了列表视图控件List Control,这一节开始介绍一种特殊的列表--树形控件Tree Control. 树形控件简介 树形控件在Windows系统中是很常见的,例如资源管理器左侧的 ...
- Visual studio C++ MFC之树形控件Tree Control
背景 本篇旨在MSDN帮助文档下总结树形控件Tree Control的使用,并列出碰到的具体问题. 正文 树形控件Tree Control的类则是CTreeCtrl,具体成员对象详见链接,以下则描述一 ...
- VS2010-MFC(常用控件:树形控件Tree Control 下)
转自:http://www.jizhuomi.com/software/203.html 前面一节讲了树形控件Tree Control的简介.通知消息以及相关数据结构,本节继续讲下半部分,包括树形控件 ...
- VS2010-MFC(常用控件:树形控件Tree Control 上)
转自:http://www.jizhuomi.com/software/200.html 前面两节讲了列表视图控件List Control,这一节开始介绍一种特殊的列表--树形控件Tree Contr ...
- ELementUI 树形控件tree 获取子节点同时获取半选择状态的父节点ID
使用element-ui tree树形控件的时候,在选择一个子节点后,使用getCheckedKeys 后,发现只能返回子节点的ID,但是其父节点ID没有返回. 解决办法有三种: 1.element ...
- 1. mvc 树形控件tree + 表格jqgrid 显示界面
1.界面显示效果 2.资源下载 地址 1. jstree https://www.jstree.com/ 2.表格jqgrid https://blog.mn886.net/jqGrid/ ...
- 使用 elementUI 树形控件Tree 编辑数据
操作新增/编辑功能时初始化数据: 应用属性 default-checked-keys 给Tree节点赋默认值(赋值数据为节点数组Arr)前,应先清空数组Arr,并且配合使用 this.$refs.tr ...
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
随机推荐
- npm 切换淘宝源
由于Node官方模块仓库太慢,建议将模块仓库切换到阿里源 C:\workspace\angular>npm config set registry https://registry.npm.ta ...
- java 多线程详解
一.重点 重点: 1.创建和启动线程 2.实现线程调度 3.实现线程同步 4.实现线程通信 1.为什么要学习多线程? 当多个人访问电脑上同一资源的时候,要用到多线程,让每个人感觉很多电脑同时为多个人服 ...
- Thinkphp路由使用
'URL_ROUTER_ON' => true, //开启路由 2.定义路由 'URL_ROUTE_RULES' => array( '/^c_(\d+)$/' => 'Index/ ...
- 利用 AWS Elastic Beanstalk 部署 Wordpress 环境
1. 准备 wordpress 代码 从https://wordpress.org/download/ 将代码压缩包下载到本地, 解压,会有一个 wordpress 目录 复制 wp-config-s ...
- 廖雪峰Java1-2程序基础-9数组
数组初识 1.数组的特点: 数组所有元素初始化默认值,int默认值为0 数组创建后大小不可改变 数组索引从0开始 数组是引用类型 使用索引下标访问数组元素,索引超出范围会报错 2.数组的定义: 类型[ ...
- Zabbix 卸载包 采用yum方式
- [UE4]虚幻UE4 .uproject文件无关联 右键菜单少了
前一段时间因为一些事,重装系统 然后重新安装UE4跟VS ,突然发现...竟然之前的UE4原先的项目找不到了,然后用UE4打开就提示 “该文件没有与之关联的程序来执行该操作,请先安装一个程序... ...
- phpmyadmin在nginx环境下配置错误
location ~ \.css { add_header Content-Type text/css; } location ~ \.js { ...
- Redis-Migrate-Tool 使用详解
注意:目前不支持4.0.X及以上的redis使用 Redis 集群迁移工具,基于redis复制,快速,稳定. github链接:https://github.com/vipshop/redis-mig ...
- CentOS设置网络,设置IP地址
1.登录CentOS. 2.# dhclient 自动获取IP地址 3.# ip addr 1).第一个地址127.0.0.1是回环地址,网卡名叫做lo,Windows操作系统也有该地址,用来和自己通 ...