这是官网关于createElement的简单例子
// @returns {VNode}
createElement(
// {String(一个 HTML 标签字符串) | Object(组件选项对象) | Function(一个返回值类型为String/Object的函数)}
// 必要参数
'div',
// {Object(包含模板相关属性的数据对象 )}
// 这样,您可以在 template 中使用这些属性.可选参数.
{
// {String | Array}
// 子节点 (VNodes),由 `createElement()` 构建而成,
// 或简单的使用字符串来生成“文本结点”。可选参数。
},
[ '先写一些文字', createElement('h1', '一则头条'),
createElement(MyComponent, {
props: { someProp: 'foobar' }
})
])
从例子中可以看到,createElement方法是可以嵌套的
实际例子中甚至可以实现多层嵌套,特别注意⚠️这里加属性的时候要加载props里面
<template>
<el-table :data="tableData">
<el-table-column prop="num" :render-header="renderHeader">
</el-table-column>
</el-table>
</template>
<script>
data() {
return {
tableData: [{ num: '50' }] }
},
methods: {
/** 加表头提示
* @param {Function} creatElement 函数
* @return {object} 返回的虚拟dom
*/
renderHeader(createElement, { column }) {
return creatElement('div', [
'可用库存',
creatElement('el-tooltip', {
class: 'item',
props: {
content: '可用库存=总库存-销售库存',
placement: 'top',
},
}, [
creatElement('i', {
class: 'we-icon we-icon--icon-help',
style: 'color: #666; font-size: 13px;margin-left: 8px;',
}),
]),
])
} }
</script>
网友评论