Render函数的用法

render 函数 跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数。

render方法必须返回一个createElement函数的调用结果，也就是模版内的顶层元素（这个方法在vue2的习惯性使用中经常用h来作为createElement的别名）。

应用场景举例说明：在Table组件中，根据当前单元格的不同字段在前面加上不同的圆点样式

对单元格的添加render函数：

{

title: '申请状态',

key: 'sheetStatusName',

width: 120,

align: 'center',

render: this.sheetStatusStyle

}

函数定义：

sheetStatusStyle(h, { row }) {

const dot = { background: null, height: '6px', width: '6px', borderRadius: '3px', marginRight: '10px', marginTop: '13px', display: 'inline-block' };

const th = this;

const jump = {

on: {

click() {

th.linkTo(row);

}

};

const name = '查看';

switch (row.sheetStatusName) {

case '待审核':

dot.background = '#00a0ff';

break;

case '已驳回':

dot.background = '#ED5354';

break;

case '已完成':

dot.background = '#00D166';

break;

default:

dot.background = '#F5A623';

}

return (

<div>

<span>{row.sheetStatusName}</span>

</div>

);

}

Render函数的用法相关推荐

vue iframe 中写script_vue: 单文件组件 render函数
使用vue-cli创建的vue项目,如何在这种项目中使用组建? 首先创建项目.启动项目我们再来了解一下目录结构,src文件夹是写逻辑代码的地方,public是最终渲染到浏览器的地方. 在public ...
render注册一个链接组件_vue: 单文件组件 render函数
使用vue-cli创建的vue项目,如何在这种项目中使用组建? 首先创建项目.启动项目我们再来了解一下目录结构,src文件夹是写逻辑代码的地方,public是最终渲染到浏览器的地方. 在public ...
vue使用render函数自定义标签动态导入js文件
文章目录问题背景解决思路知识加油站 Render函数 createElement参数代码实现问题背景项目中需要引入国网思极地图,但是因为pc端的项目一般都是部署到内网.该项目要同时部署到2 ...
vue的render函数用法
1.render简介前面我们的组件的模板都是在模板里写的(template),模板最后都会被vue编译成virtual dom(虚拟dom),在某些情况下模板可能不好用,例如需要实现一个动态的文章标 ...
render函数和redirect函数的区别+反向解析
render函数和redirect函数的区别+反向解析 1.视图函数:一定是要包含两个对象的(render源码里面有HttpResponse对象) request对象:----->所有的请求 ...
vue之Render函数
(1)什么是Render函数先来看一个场景,在博客网中,一般有一级标题.二级标题.三级标题...,为了方便分享url,它们都做成了锚点,点击后,会将内容加载网址后面,以#分隔. 例如'特性'是一个& ...
gym中render()函数在远端server运行的解决方案
近来在跑gym上的环境时,遇到了如下的问题: pyglet.canvas.xlib.NoSuchDisplayException: Cannot connect to "None" ...
VUE进阶篇Part9（render函数）
这里介绍一下render函数. 作用:使用render函数就不需要在template中一点点的写html了,可以通过函数去构建,实际上render函数就是用来构建一个组件的这里分为以下几点去讲解,每 ...
Render函数详解
一.虚拟dom DOM是文档对象模型(Document Object Model)的简写,在浏览器中通过js来操作DOM的操作性能很差,于是虚拟Dom应运而生.虚拟Dom就是在js中模拟DOM对象树来 ...

Render函数的用法

Render函数的用法相关推荐

最新文章

热门文章