Render函数的使用方法
Render函数是vue2.x 新增的一个函数、主要用来提升节点的性能，它是基于JavaScript计算。使用Render函数将template里面的节点解析成虚拟的dom。
前期在使用 iview 和 element 树形控件时，想要在节点的前面加上光标、后面加上编辑按钮，找遍所有的 API 都没有找到对应设置方法，只看到了rendoerContent 函数，发现此函数可以使用想要功能，render-content 函数仔细研究了一番，发现不仅好用，并且灵活。
本例使用 vue + element 实现
例子1：在树的每个节点后面添加上编辑按钮。
renderContent (createElement, { node, data, store }) {
var self = this;
return createElement('span', [
// 显示树的节点信息
createElement('span', node.label),
// 在属性节点后后面添加一个“ + ” 和 “ - ”
createElement('span',{
attrs:{
style:"margin-left:150px"
},
domProps: {
innerHTML: "<i class=\"el-icon-circle-plus\"></i>"
},
on: {
click(){
// 添加子节点
console.info("点击了节点" + data.id + "的添加按钮");
store.append({ id: self.baseId++, label: 'testtest', children: [] }, data);
}
}
}),
createElement('span',{
attrs:{
style:"margin-left:10px"
},
domProps: {
innerHTML: "<i class=\"el-icon-delete\" style=></i>"
},
on: {
click(){
// 删除子节点
console.info("点击了节点" + data.id + "的删除按钮");
store.remove(data);
}
}
}),
]);
},
例二：通过判断节点的深度，显示不同的光标
renderContent (createElement, { node, data, store }) {
var self = this;
// 通过判断，在第5 层之后只显示 “ + ” 和 节点信息
if (data.deep > 4) {
return createElement('span', [
// 显示树的节点信息
createElement('span', node.label),
// 设备后面删除光标的响应函数
createElement('span',{
attrs:{
style:"margin-left:10px"
},
domProps: {
innerHTML: "<i class=\"el-icon-delete\" style=></i>"
},
on: {
click(){
// 删除子节点
console.info("点击了节点" + data.id + "的删除按钮");
store.remove(data);
}
}
}),
]);
}
//通过对应节点显示对应的信息
return createElement('span', [
// 显示树的节点信息
createElement('span', node.label),
createElement('span',{
attrs:{
style:"margin-left:150px"
},
domProps: {
innerHTML: "<i class=\"el-icon-circle-plus\"></i>"
},
on: {
click(){
// 添加子节点
console.info("点击了节点" + data.id + "的添加按钮");
store.append({ id: self.baseId++, label: 'testtest', children: [] }, data);
}
}
}),
createElement('span',{
attrs:{
style:"margin-left:10px"
},
domProps: {
innerHTML: "<i class=\"el-icon-delete\" style=></i>"
},
on: {
click(){
// 删除子节点
console.info("点击了节点" + data.id + "的删除按钮");
store.remove(data);
}
}
}),
]);
},
参考图片：
Render函数的使用方法相关推荐
- render函数和redirect函数的区别+反向解析
render函数和redirect函数的区别+反向解析 1.视图函数:一定是要包含两个对象的(render源码里面有HttpResponse对象) request对象:----->所有的请求 ...
- render函数高级组件jsx基本使用
前言 在学习了解组件复用的时候查看资料,看到了mixins,extend方法同时也查到了高级函数(Higher-Order Components)和jsx等字眼.听上去hoc和jsx有种高级的感觉,那 ...
- gym中render()函数在远端server运行的解决方案
近来在跑gym上的环境时,遇到了如下的问题: pyglet.canvas.xlib.NoSuchDisplayException: Cannot connect to "None" ...
- Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
- vue iframe 中写script_vue: 单文件组件 render函数
使用vue-cli创建的vue项目,如何在这种项目中使用组建? 首先创建项目.启动项目 我们再来了解一下目录结构,src文件夹是写逻辑代码的地方,public是最终渲染到浏览器的地方. 在public ...
- vue render函数
Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数. 比如如下我想要实现如 ...
- 你需要知道的vue2 jsx render函数
通常开发vue我们使用的是模板语法,其实还有和react相同的语法,那就是render函数,同样支持jsx语法. Vue 的模板实际是编译成了 render 函数. 0 传统的createElemen ...
- vue render函数_Vue原理解析（一）：Vue到底是什么？
Vue,现在前端的当红炸子鸡,随着热度指数上升,实在是有必要从源码的角度,对它功能的实现原理一窥究竟.个人觉得看源码主要是看两样东西,从宏观上来说是它的设计思想和实现原理:微观上来说就是编程技巧,也就 ...
- render注册一个链接组件_vue: 单文件组件 render函数
使用vue-cli创建的vue项目,如何在这种项目中使用组建? 首先创建项目.启动项目 我们再来了解一下目录结构,src文件夹是写逻辑代码的地方,public是最终渲染到浏览器的地方. 在public ...
最新文章
- python nums函数_Python函数
- Keras之DNN：利用DNN【Input(8)→(12+8)(relu)→O(sigmoid)】模型实现预测新数据(利用糖尿病数据集的八个特征进行二分类预测
- 2021CCPC网络赛部分题解
- 【深度学习】深入浅出卷积神经网络及实现！
- 9、mysql数据表中数据的查询（1）
- oracle11连12c报权限错误,关于Oracle12c连接报错的问题
- 天正计算机命令大全,天正CAD 中按Ctrl+v在不同图中粘贴出现“未知命令T81_tpasteclip”，直接在CAD中就能操作...
- 服务器上使用mysql_在服务器上安装、使用MySQL的注意事项
- sap 分摊分配不产生会计凭证的原因_会计凭证的实际分类及凭证管理应用
- 关于Egret项目升级引擎出现的问题
- 用pc抓取vlan tag数据包
- 红帽企业linux8,红帽企业Linux8登场
- 《黑客与画家》摘要读后感
- 松下GH5相机SD卡格式化后MP4视频碎片重组数据恢复方法
- 清越科技将开启申购：预计募资约8亿元，高裕弟为实际控制人
- git commit三种回退的方式
- SAGAN: Self-attention GAN
- kali中使用Docker搭建vulhub靶场和vulapps靶场（新手向）
- 服务器进系统后键盘鼠标一卡一卡的,windows10系统鼠标卡顿的处理方法
- 外键字段未建索引引发的死锁