必备技能三、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"> ...
随机推荐
- js之意想不到的结果
js 是弱类型语言 ,在进行计算时 如果遇到不能计算的单位,就会进行默认转换 1.typeof NaN 结果为 “number” 原因:NaN 表示 不是不是一个数字(Not a Number), ...
- git的命令操作指南
Git图形化界面我用的还可以,但是命令就不太会了,索性和大家一起学习下Git命令的用法...一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练使用,恐怕要记住60-100个命令. fetch ...
- QTP基本循环异常遍历(代码方式实现)
0 环境 系统环境:win7 1 前言 在正常循环的基础下 添加异常处理遍历 一些基本操作 请看正常循环 https://www.cnblogs.com/my-ordinary/p/11739180. ...
- 101)PHP,多文件上传
就是在之前的单文件上传的基础上加了一个函数: <?php /** * 上传函数 * @param $tmp_file $_FILES的五个信息,比如upload($_FILES('mingzi' ...
- 3dmax2014卸载/安装失败/如何彻底卸载清除干净3dmax2014注册表和文件的方法
3dmax2014提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dmax2014失败提示3dmax2014安装未完成,某些产品无法安装,也有时候想重新安装3 ...
- va_list、va_start和va_end使用
我们知道va_start,va_arg,va_end是在stdarg.h中被定义成宏的,由于1.硬件平台的不同 2.编译器的不同,所以定义的宏也有所不同. 在ANSI C中,这些宏的定义位于stdar ...
- SHELL用法六(Find语句)
1.SHELL编程Find语句案例实战 1)SHELL编程四剑客工具:Find.Grep.Sed.Awk,通过四剑客可以完成常规Linux指令无法完成或者比较复杂的功能,学好SHELL编程四剑客有助于 ...
- SSL_CTX结构体
/* 定义在ssl.h头文件中 */struct ssl_ctx_st { SSL_METHOD *method; unsigned long options; unsigned long mode; ...
- 《hdu 4540 威威猫打地鼠》
威威猫系列故事——打地鼠 Time Limit: 300/100 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total ...
- (警告)不要轻易删除libc.so.6,以及误删恢复
网上有很多帖子介绍升级libc.so.6库的帖子,这里存在巨大的坑: 如: Linux/CentOS 升级C基本运行库CLIBC的注意事项(当想解决GLIBC_2.x找不到的编译问题) 里边都会有这样 ...