【笔记】render函数——ElementUI

提示：阅读文章后，如果可以请留下宝贵的意见，可以使我提高编程水平，从而写出更好的文章给大家，谢谢

---

一、render函数是什么？

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

二、使用步骤

1.简化代码解析

我们把代码先简化，其基础模型如下所示，()我们可以看作div标签包裹的内容，{}可以添加一些样式，[]代表标签中的内容

h('div',{},[])

为了怕大家看不懂我们可以举一个例子，如下所示：

h('div',{测试1},[测试2])

可以想象成的模型

<div style="测试1">
	测试2
<div>

2.具体代码

代码如下（示例）：其中datasetName=‘分计划/组合资产分布信息’，datasetCode=‘BAD01003’

 tableColumns: [ {
        label: '数据集/数据集代码',
        align: 'center',
        width: 160,
        showOverflowTooltip: false,
        render: (row, h) => {
          const { datasetName, datasetCode } = row
          return h('div', {
            style: {
              textAlign: 'center'
            }
          }, [h('span', datasetName), h('br'), h('div', {
            style: {
              fontSize: '12px',
              color: '#999'
            }
          }, `(${datasetCode})`), [h('div', {
            style: {
              textAlign: 'left'
            }
          }, [`(${datasetCode})`])]])
        }
      }
      ]

3.效果展示

图片如下（示例）：

4、更多情况

那我如果想要实现的效果是多层div怎么办呢，那就可以向下面的示例代码一样，最后一个h(‘div’,{},[])我没有写内容，留给你去填充

        render: (row, h) => {
          const { datasetName, datasetCode } = row
          return h('div', {
            style: {
              textAlign: 'center'
            }
          }, [h('span', datasetName), h('br'), h('div', {
            style: {
              fontSize: '12px',
              color: '#999'
            }
          }, `(${datasetCode})`)]，[h('div',{},[])])
        }

该文章仅供参考。

---

总结

以上[h('div',{},[])]就是今天要讲的内容，本文仅仅简单介绍了render函数的一次小实践，谢谢