vue el-tree 中的render-content 使用中怎么样字符串连接

Question

我在项目中用到了element-ui的el-tree 控件；直接返回一个不带变量的是可以的。
但是带变量的就不行了

代码如下

renderContent(h, { node, data, store }) {
    if(data.color){
        return (//这种方式返回，background属性不会生效
            <span>
                <label style="background:{data.color};width:30px;height:10px;line-height:10px;margin-bottom: 0px"></label>
                <span>{node.label}</span>
            </span>
        );
    }

    return ( <span>{node.label}</span> );//这种是可以的
}

各位有什么意见吗？

Answer 1

楼上方法是可以的，不过你用了render 建议用jsx的写法 更统一 清晰
楼上的应该按照
：style="{background:data.color,width:'30px',height:'10px',linHeight:'10px',marginBottom: 0}"
JSX:
代码

renderContent(h, { node, data, store }) {
    if(data.color){
        return (
            <span>
                <label style={{background:'red',width:'30px',height:'10px',lineHeight:'10px',marginBottom: 0}}></label>
                <span>{node.label}</span>
            </span>
        );
    }

    return ( <span>{node.label}</span> );//这种是可以的
}

Answer 2

<label :style="'background:'+data.color'+';width:30px;height:10px;line-height:10px;margin-bottom: 0px'"></label>

或者

<label :style="`background:${data.color};width:30px;height:10px;line-height:10px;margin-bottom: 0px`"></label>