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