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. 动态指定log4net日志文件名称

    如果是希望日志文件按常见的日期格式动态命名,没什么好说的,直接修改app.config <param name="DatePattern" value="yyyyM ...

  2. SSH(struts+spring+hibernate)常用配置整理

    SSH(struts+spring+hibernate)常用配置整理 web.xml配置 <?xml version="1.0" encoding="UTF-8&q ...

  3. CentOS-DHCP服务搭建

    title date tags layout CentOS6.5 DHCP服务器搭建 2018-08-26 Centos6.5服务器搭建 post 1.安装dhcp软件包 yum install -y ...

  4. 编译安装-Subversion 1.8.5

    下载地址:http://subversion.apache.org/download/#recommended-release @开头的行为注释,#开头的红色行为命令 @下载tar包 #wget ht ...

  5. iOS有关通讯录操作

    一.首先获取用户通讯录授权信息. 在AppDelegate中导入#import <AddressBook/AddressBook.h>框架,在下列方法中获取授权信息. - (BOOL)ap ...

  6. 推荐几款开源的js日期控件

    做为一个正规的网站,经常需要一些日期或时间的筛选,所以我们今天就推荐二十多款javascript的js日期/时间筛选插件.个个经典,绝对有你需要的. My97DatePicker ,国人开发的一款js ...

  7. [LC] 209. Minimum Size Subarray Sum

    Given an array of n positive integers and a positive integer s, find the minimal length of a contigu ...

  8. Java判断字符串是否为空

    我们常常在实际开发调用一些类库,或者本身框架里面有类库去实现判断字符串空的操作,但是某些场景下上不是很方便去引入外部库的,所以需要我们自己去做这个工作,事实上判断空的操作不是很复杂,所以做个记录. 空 ...

  9. leetcode 1.回文数-(easy)

    2019.7.11leetcode刷题 难度 easy 题目名称 回文数 题目摘要 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 思路 一些一定不为回文数的 ...

  10. 如何卸载烦人的2007组件,windows提供的解决方案

    如何卸载烦人的2007组件:很恶心人各种软件已经手动删除卸载都无法用,不是cd/dvd找不到就是什么msi文件找不到:对于这种恶心的问题,windows提供了如下解决方案:我使用fixit轻松卸载,很 ...