vue element tree元件,根據不同的狀態顯示不同的字型顏色
阿新 • • 發佈:2020-09-22
HTML
<el-tree
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
:render-content="renderContent"
:highlight-current="true"
></el-tree>
data
把帶status為1的顏色變為紅色,其餘的變為綠色
data: [ { label: "一級 1", children: [ { label: "二級 1-1", children: [ { label: "三級 1-1-1", }, ], }, ], }, { label: "一級 2", children: [ { label: "二級 2-1", children: [ { label: "三級 2-1-1", }, ], }, { label: "二級 2-2", children: [ { label: "三級 2-2-1", status: 1, }, ], }, ], }, { label: "一級 3", children: [ { label: "二級 3-1", children: [ { label: "三級 3-1-1", status: 1, }, ], }, { label: "二級 3-2", children: [ { label: "三級 3-2-1", }, ], }, ], }, ], defaultProps: { children: "children", label: "label", },
render-content的使用
handleNodeClick(data) { console.log(data); }, renderContent(h, { node, data, store }) { if (data.status == 1) { return <span style="color:red">{node.label}</span>; } else { return <span style="color:green">{node.label}</span>; } },