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

巴特西

render函数的使用

最新文章

热门文章