鍍金池/ 問答/HTML/ vue el-tree 中的render-content 使用中怎么樣字符串連接

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

我在項目中用到了element-ui的el-tree 控件；直接返回一個不帶變量的是可以的。
但是帶變量的就不行了

clipboard.png

代碼如下

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> );//這種是可以的
}

各位有什么意見嗎？

回答
編輯回答
孤毒
<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>

2017年1月30日 10:02
編輯回答
近義詞

樓上方法是可以的，不過你用了render 建議用jsx的寫法 更統(tǒng)一 清晰
樓上的應(yīng)該按照
：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> );//這種是可以的
}
2017年6月27日 16:31