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渲染函数的更多相关文章

  1. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  2. 基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table

    基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table https://segmentfault.com/a/1190000015970367

  3. Vue.js 2.x render 渲染函数 & JSX

    Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...

  4. vue render 渲染函数

    vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...

  5. Render渲染函数和JSX

    1.Render函数:render是用来替换temlate的,需要更灵活的模板的写法的时候,用render. 官网API地址:https://cn.vuejs.org/v2/guide/render- ...

  6. Vue之render渲染函数和JSX的应用

    一.模板缺陷 模板的最大特点是扩展难度大,不易扩展.可能会造成逻辑冗余 <Level :type="1">哈哈</Level> <Level :typ ...

  7. 【js】vue 2.5.1 源码学习 (十一) 模板编译compileToFunctions渲染函数

    大体思路(九) 本节内容: 1. compileToFunctions定位 1. compileToFunctions定位 ==> createCompiler = createCompiler ...

  8. 渲染函数render和函数式组件

    vnode对象 vnode对象包括(vnode并不是vue实例,而是vue实例中渲染函数render执行后生成的结果) this.tag = tag // 当前节点标签名 this.data = da ...

  9. 普通组件定义渲染和render渲染组件的区别(三)

    普通方式定义组件和效果: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

随机推荐

  1. 什么是CDN

    1.什么是cdn    cdn全称是内容分发网络.其目的是让用户能够更快速的得到请求的数据.简单来讲,cdn就是用来加速的,他能让用户就近访问数据,这样就更更快的获取到需要的数据.举个例子,现在服务器 ...

  2. supervisor安装与配置实践版

    应用场景 系统:centos7 需求:监控一个swooleWebSocket.php文件,程序使用的是8080端口,挂了自动被supervisor拉起来 一.首先要安装supervisor软件 yum ...

  3. OneDrive for Business

    一.界面介绍 1.在Office 365主页 点击“OneDrive”登陆 2.进入OneDrive,可对文档进行存储.同步并共享文档. 3.点击,可对文档进行编辑.分享.重命名等操作 二.文档同步 ...

  4. struts-dojo的使用

    1.导入struts2-dojo-plugin-2.1.8.jar 2.在用使用dojo的页面引入 <span style="font-size:14px;">< ...

  5. 如何回收VCSA 6自带的vPostgres数据库空间

    最近有学生连续反应由于VCSA磁盘空间满了,导致服务无法正常启动,寻求压缩数据库空间的问题.首先说下,VCSA的数据库是没办法图形界面管理的, 它的内置vPostgres数据库的管理只能通过命令行来完 ...

  6. Weave实现跨主机容器互联

    安装与启动 直接从github下载二进制文件安装. docker_host1(服务器1): 下载weave # sudo wget -O /usr/local/bin/weave https://ra ...

  7. 基于ci框架 修改出来了一个带农历的万年历。

    1这里没有写model:代码一看就懂,没什么负杂地方,就是麻烦一点. 直接control模块的代码: <?php if ( ! defined('BASEPATH')) exit('No dir ...

  8. [LC] 45. Jump Game II

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  9. Eclipse中项目过大引起的 IDE 加载缓慢,JVM 内存不足的情况解决

    如果 IDE 加载项目非常缓慢,甚至常常出现卡死的情况,有可能是开发工具设置的 JVM 内存不够引起的.解决办法:找到 Eclipse 的安装目录,修改 Eclipse.ini 配置文件.修改此配置文 ...

  10. <JZOJ5943>树

    一开始t了五个点我就一脸懵逼 然后 发现高级操作... 就是那个tor的数组2333 可以让一些不需要改的不再去改啦 位运算果然是神奇的东西XD 魔性哈哈哈 #include<cstdio> ...