源代码
<template>
<div>
<h2>ComboTree Template</h2>
<ComboTree v-model="value" :data="data" placeholder="Select a node">
<Tree slot="tree">
<template slot-scope="{node}">
<span>{{node.id}} - {{node.text}}</span>
<span v-if="node.id==11" class="tree-folder icon-man"></span>
<span v-if="node.id==12" class="tree-folder icon-tip"></span>
</template>
</Tree>
</ComboTree>
<p v-if="value">You selected: {{value}}</p>
</div>
</template>
<script>
export default {
data() {
return {
value: null,
data: [
{
id: 1,
text: "My Documents",
children: [
{
id: 11,
text: "Photos",
state: "closed",
children: [
{
id: 111,
text: "Friend"
},
{
id: 112,
text: "Wife"
},
{
id: 113,
text: "Company"
}
]
},
{
id: 12,
text: "Program Files",
children: [
{
id: 121,
text: "Intel"
},
{
id: 122,
text: "Java"
},
{
id: 123,
text: "Microsoft Office"
},
{
id: 124,
text: "Games"
}
]
},
{
id: 13,
text: "index.html"
},
{
id: 14,
text: "about.html"
},
{
id: 15,
text: "welcome.html"
}
]
}
]
};
}
};
</script>