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', dis 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;
switch函数用法举例default:
dot.background = '#F5A623';
}
return (
<div>
<span style={dot}></span>
<span>{row.sheetStatusName}</span>                    <a {...jump}>{name}</a>
</div>
);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。