render函数的使用

render函数的几种使用方法
最近使用element-ui的tree组件时，须要在组件树的右边自定义一些图标，就想到了用render函数去渲染。

<el-tree class="p-tree" :render-content="renderContent" ref="pTree">
</el-tree>

 函数接收一个  方法做为第一个参数用来建立 。
第二个参数用来接收一个上下文信息。
createElement 接受的参数 一、标签名，二、内容（多数状况下都是动态渲染进去的，因此直接写内容的状况仍是挺少的），
能够直接写各类属性，也能够用一个变量名，把各类属性存起来。
三、子节点

如：
直接写入的：rendercreateElementVNode

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'            }        })]    );}