render函数的几种使用方法最近使用element-ui的tree组件时，需要在组件树的右边自定义一些图标，就想到了用render函数去渲染。
<el-tree class="p-tree" :render-content="renderContent" ref="pTree"></el-tree>
render 函数接收一个 createElement 方法作为第一个参数用来创建 VNode。第二个参数用来接收一个上下文信息。createElement 接受的参数 1、标签名，2、内容（多数情况下都是动态渲染进去的，所以直接写内容的情况还是挺少的），可以直接写各种属性，也可以用一个变量名，把各种属性存起来。3、子节点如：直接写入的：
renderContent (createElement, { node, data, store }) { return createElement( 'span',{ 'class': { 'node-disabled': data.is_forbidden === '2' }, attrs: { id: type }, style: { 'float': 'right', 'margin-top': '10px', 'margin-right': '10px' }, on: { click: (e) => { e.stopPropagation(); } } } ); // console.log(node);})
用变量名字的
renderContent (createElement, { node, data, store }) { let prop = { 'class': [ 'filter-tree-content', parseInt(data.is_own) === 1 ? 'green' : '' ], domProps: { innerHTML: data.alias } }; return createElement( 'span', prop ); // console.log(node);})
两种方式的写法基本一致，class的写法稍微有点不一样还有一种就是嵌套型的renderContent (createElement, { node, data, store }) { // div 标签下包裹一个a标签 let prop = { // 设置属性 'class': [ 'v-text', 'pack' ], domProps: { innerHTML: '...' }, on: { click: ($event) => { // 添加事件 this.clickHandler(data, $event); } } }; return createElement( 'div', // 创建标签 { 'class': { // 设置类名 'node-disabled': data.is_forbidden === '2' } }, [createElement('span', { domProps: { innerHTML: node.label }, 'class': { textContent: this.isClass }, style: { backgroundSize: '15px 15px' } })] );}
转载于:https://www.cnblogs.com/wzybnzy/p/7444867.html
相关资源：JAVA上百实例源码以及开源项目
