render函數的使用

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