必备技能三、render渲染函数
Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器。
export const TablePlugins = {
install (Vue, opts) {
Vue.prototype.getCellRender = (h, cfgs, type = 'Button') => {
const comps = []
cfgs.forEach(cfg => {
cfg.size = cfg.size || 'small'
cfg.color = cfg.color || 'green'
cfg.disabled = cfg.disabled || false
tagProcess(cfg)
comps.push(h(cfg.tag || type, {
props: { ...cfg },
on: cfg.on,
style: { ...cfg.style },
'class': { ...cfg.class }
}, cfg.label, cfg.render))
})
return h('div', {
style: { display: 'inline-block' }
}, comps)
}
}
}
必备技能三、render渲染函数的更多相关文章
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- 基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table
基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table https://segmentfault.com/a/1190000015970367
- Vue.js 2.x render 渲染函数 & JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
- vue render 渲染函数
vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...
- Render渲染函数和JSX
1.Render函数:render是用来替换temlate的,需要更灵活的模板的写法的时候,用render. 官网API地址:https://cn.vuejs.org/v2/guide/render- ...
- Vue之render渲染函数和JSX的应用
一.模板缺陷 模板的最大特点是扩展难度大,不易扩展.可能会造成逻辑冗余 <Level :type="1">哈哈</Level> <Level :typ ...
- 【js】vue 2.5.1 源码学习 (十一) 模板编译compileToFunctions渲染函数
大体思路(九) 本节内容: 1. compileToFunctions定位 1. compileToFunctions定位 ==> createCompiler = createCompiler ...
- 渲染函数render和函数式组件
vnode对象 vnode对象包括(vnode并不是vue实例,而是vue实例中渲染函数render执行后生成的结果) this.tag = tag // 当前节点标签名 this.data = da ...
- 普通组件定义渲染和render渲染组件的区别(三)
普通方式定义组件和效果: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
随机推荐
- java正则(贪婪、勉强)
贪婪.勉强和侵占量词间的不同 在贪婪.勉强和侵占三个量词间有着细微的不同. 贪婪(*, ?, +):读入整个串,从后往前匹配 勉强(*?, ??, +?):从前往后匹配 侵占(*+, ?+, ++): ...
- 【UML】
静态:类图,包图,部署图,构件图,对象图 行为:用例图,活动图,顺序图,状态图,交互图 [类图] http://www.uml.org.cn/oobject/201104212.asp [对象图] h ...
- MySQL数据库优化、设计与高级应用
MySQL数据库优化主要涉及两个方面,一方面是对SQL语句优化,另一方面是对数据库服务器和数据库配置的优化. 数据库优化 SQL语句优化 为了更好的看到SQL语句执行效率的差异,建议创建几个结构复杂的 ...
- Rip路由实验
以上是实验要求和实验拓扑图 (实验拓扑自己重新连线) 1.在R1-R4,4台路由器上各设置一个回环口 2.略 3.在四个路由器上配置rip(rip的基本命令) #rip 1 #version 2 #u ...
- Spring+Mybais整合
简单的来说,Spring主要用于在业务层(当然spring也有数据库交互的模块,个人觉得spring在这方面有一点不如mybatis),而mybatis主要用于数据持久化,在一个完整的项目中无论是业务 ...
- JarvisOJ level3_x64
这一题是和前面x86的差不多,都是利用了同一个知识点,唯一的区别就是使用的堆栈地址不同,x86是直接使用堆栈来传递参数的,而x64不同 x64的函数调用时整数和指针参数按照从左到右的顺序依次保存在寄存 ...
- 第一次提交本地代码到github上
上传本地项目到github: 一.SSH方式 配置ssh 进入你要上传项目中的文件夹 1)先配置ssh,输入 ssh-keygen -t rsa -C "your_email@example ...
- Docker For Mac 下安装 Rancher
https://www.jianshu.com/p/5fb3e1a998d6 Docker For Mac 下安装 Rancher 原文:如何在 OS X 上安装 Rancher Rancher 是 ...
- JAVA 获取网页源代码保存到本地文件
package httpget; import java.io.BufferedReader; import java.io.File; import java.io.FileNotFoundExce ...
- 吴裕雄--天生自然 PYTHON数据分析:基于Keras的CNN分析太空深处寻找系外行星数据
#We import libraries for linear algebra, graphs, and evaluation of results import numpy as np import ...