【vue】使用vue+element搭建项目,Tree树形控件使用
目录
- 一、安装依赖
- 二、常用属性、事件
- 三、demo应用
- html代码
- 属性用法
- 3.2.1 :default-expanded-keys(默认展开项)
- 3.2.2 :props="defaultProps" 用法
- 3.2.3 通过render-content方法定义树节点内容(js代码)
- 3.2.4 :load="loadChildData" (load 加载子树数据的方法,仅仅当lazy属性为true时生效)(js代码)
- 3.2.5 @node-click="handleNodeClick"
- 3.2.6 更新二级数据
- 3.2.7 接口情况
- 3.2.8 页面效果图:
一、安装依赖
本例中,使用render-content进行树节点内容的自定义,因此需要支持JSX语法。(见参考资料第3个)
在Git bash中运行一下指令 cnpm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-es2015\ --save-dev
二、常用属性、事件
Attributes(属性名) | 描述 | type(类型) | default(默认值) |
node-key |
每个树节点用来作为唯一标识的属性, 整棵树应该是唯一的 |
string | 无 |
default-expanded-keys | 默认展开的节点的key的数组 | array | 无 |
auto-expand-parent | 展开子节点的时候是否自动展开父节点 | boolean | true |
props | 配置选项 | object | 无 |
render-content | 树节点的内容区的渲染Function | Function(h,{node,data,store}) | 无 |
highlight-current | 是否高亮当前选中节点 | boolean | false |
expand-on-click-node |
是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false 则只有点箭头图标的时候才会展开或者收缩节点。 |
boolean | true |
lazy | 是否懒加载子节点,需与 load 方法结合使用 | boolean | false |
load | 加载子树数据的方法,仅当 lazy 属性为true 时生效 | function(node, resolve) | 无 |
事件名称 | 描述 | 回调参数 |
node-click |
节点被点击时的回调 |
共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
|
三、demo应用:
3.1 html代码
<el-treenode-key="id" :default-expanded-keys="[0]" //0对应下方①:auto-expand-parent="true":props="defaultProps" :render-content="renderContent" :highlight-current="true" :expand-on-click-node="false"lazy :load="loadChildData" @node-click="handleNodeClick"> </el-tree>
ps:
本例中点击节点箭头时才展开子级节点,执行loadChildData操作,选中节点(并非箭头)时才执行handleNodeClick操作
将tree的某些节点设置为默认展开时,需要设置 default-expanded-keys 和 node-key,两者缺一不可。其中node-key的值为节点数据中的一个字段名,该字段在整棵树中是唯一的。
例如:node-key="id",
其中default-expanded-keys的值为数组,其值为展开项的id。比如::default-expanded-keys="[2, 3]"
lazy 需要和load结合使用,本例中采用懒加载,动态加载节点数据的方法加载数据
会调2次接口,第一次接口为第一级数据,第二次为第一级的child数据,此结果于
:default-expanded-keys="[0]" ,
lazy
:load="loadChildData"这是三个属性有关
3.2应用中用到的属性用法
3.2.1 :default-expanded-keys(默认展开项)
<el-tree:data="data2"show-checkboxnode-key="id":default-expanded-keys="[2, 3]":default-checked-keys="[5]":props="defaultProps"> </el-tree><script>export default {data() {return {data2: [{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,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'}]}],defaultProps: {children: 'children',label: 'label'}};}}; </script>
default-expanded-keys(默认展开的节点)效果图
3.2.2 :props="defaultProps" 用法
:props="defaultProps" defaultProps: {children: 'children',label: 'title',},
3.2.3通过render-content方法定义树节点内容(js代码)
renderContent(h, { node, data, store }) {let icon;let platForm; let isShow = false;if(platForm == 0){icon = ( <icon-svg icon-style="icon-style" icon-class="el-icon-pc"></icon-svg>); isShow = true; }else{icon = ( <icon-svg icon-style="icon-style" icon-class="el-icon-wx"></icon-svg>); isShow = false;}return (<span style="font-size: 14px; padding-right: 8px"><span class="normalText">{icon}<span style="color: #333;"> {node.label} </span></span>{isshow ? '' :<span class="pos-a" style="right:20px; top:0;"><span style="font-size: 12px;line-height: 30px;"on-click={() => this.operation(node, data, event)}><icon-svg icon-style="icon-style" icon-class="el-icon-ifcn-gengduo"></icon-svg></span></span>}</span>); }
3.2.4 :load="loadChildData" (load 加载子树数据的方法,仅仅当lazy属性为true时生效)(js代码)
loadChildData(node, resolve) { ......接口调用
},
node:
3.2.5 @node-click="handleNodeClick"
handleNodeClick(data, node, vuecomponent) {console.log('data:', data,'\n' ,'node:', node, '\n', 'vuecomponent',vuecomponent); }
data:(当前选中节点的数据)
node: (node当前节点的信息,含当前节点的数据data(和上图一致),父节点的信息parent)
3.2.6更新二级数据
this.$set(this.levelTwoDatas, 'children', []); this.levelTwoDatas.data.children = 接口数据;
3.2.7接口情况
第一次调接口的数据:
第2次调接口,树节点数据(根据父节点的id,获取子节点数据)
3.2.8页面效果图:
相关资料:
- http://element.eleme.io/#/zh-CN/component/tree
- http://www.php.cn/js-tutorial-378333.html
- https://blog.csdn.net/u014628388/article/details/76099812
转载于:https://www.cnblogs.com/websmile/p/8268853.html
【vue】使用vue+element搭建项目,Tree树形控件使用相关推荐
- elementui tree获取父节点_vue_elementUI_ tree树形控件 获取选中的父节点ID
一, vue_elementUI_ tree树形控件 1.1默认点击tree节点的第一个(注意不是checked选中) :expand-on-click-node="false" ...
- vue+element tree(树形控件数据格式)组件(1)
vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间 ...
- vue 树形控件可编辑_vue.js element-ui组件改iview 第一期 tree树形控件
此为第一期修改,后期也适配了其他组件,更多查看我得文章 element-ui组件的tree树形控件修改源码改为iview组件 实现原理 修改了element-ui源码,把源码里面的tree模块提取出来 ...
- vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
- vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件 发布时间:2021-06-11 17:26:48 来源:亿速云 阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
- Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加.删除和修改 最近在搞erp项目对应后台的管理功能,为了加速开发使用了 vue-element-admin 开发,使用的是e ...
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
- React 组件封装之 Tree 树形控件
React 组件封装之 Tree 树形控件 一.Tree 树形结构 二.使用案例 三.API 使用指南 四.源代码 五.总结 一.Tree 树形结构 组件说明: 实现树形控件,适用于组织架构.文章列表 ...
- 《实用VC编程之玩转控件》第15课:Tree树形控件
本文转载自:VC驿站 https://www.cctry.com/thread-297465-1-1.html 1.控件简介: Tree树形控件也是我们编程过程中比较常用的一个控件,而且在其他软件中也 ...
- Element-UI实现Tree 树形控件节点添加图标
Element-UI实现Tree 树形控件节点添加图标: 属于自定义节点内容,可以通过两种方法进行树节点内容的自定义:render-content 和 scoped slot. 1.scoped s ...
最新文章
- jchdl - 初次使用建立项目示例
- jboss项目导入idea_如何导入任何JBoss BRMS示例项目
- Linux 命令之 which -- 查找并显示给定命令的绝对路径(查找命令的位置/查询命令的位置/搜索命令的位置/查看命令的位置)
- DevExpress WinForms使用教程:图表控件 - 内置深入查询
- You can‘t specify target table ‘XXX‘ for update in FROM clause
- java 两个sql文_Java和SQL取两个字符间的值
- 一些JavaScript基本函数
- ps右键不显示编辑选项_0基础小白能上手的AE动态插画教程你还不知道么?
- Analysis of variance(ANOVA)
- 国内外公有云对比:功能介绍、性能测试
- php 定时推送,php定时自动发送新浪微博
- 不用下载Axure RP Extension for Chrome插件,即可看原型文件
- 电脑PHP动画制作画板,Canvas在线画图—简单制作一个画板
- lozi混沌映射吸引子,使用python的matplotlib绘制,可以放大和缩小
- CUDA下的GPU编程入门--第一个CUDA程序
- 打开jupyter notebook 报错 404GET/static/components/marked/lib/marked.js?
- Xilinx-ZYNQ7000系列-学习笔记(1):用XADC测外部温度值
- PT展现场直击,广和通5G模组点亮数字化未来
- Window xp 桌面主题修改为windows经典后,再恢复为Window xp 的方法
- AI: 企业数字化转型的简介、发展以及未来趋势
热门文章
- UA MATH571A QE练习 R语言 单因子试验的回归分析
- 使用powerdesigner建立UML类图
- 揭密Oracle之 七种武器
- 图解Detours实例
- 学习笔记95—不要错过的科研神器
- 设计模式之——Template模板模式
- Docker最佳实践-部署LNMP环境
- 使用 Vagrant 打造跨平台开发环境
- (转)VMware 虚拟机安装Ubuntu 11.10使用share folders共享目录
- card2phone android,Installing application on SD-card in Android sdk 2.2