Tree 树形控件
示例
控制点击行为、展开收起
Item click
Expanded items
[ "infused", "brewed" ]- Drip brewed
- Filtered
- Pour-over
- Immersion brewed
- French press
- Cold brew
- Boiled
- Espresso
- Milk coffee
<template>
<article>
<section>
<h4>Item click</h4>
<veui-radio-group
v-model="mode"
:items="modes"
/>
</section>
<section>
<h4>Expanded items</h4>
{{ expanded }}
</section>
<section>
<veui-tree
:datasource="coffees"
:item-click="mode"
:expanded.sync="expanded"
/>
</section>
</article>
</template>
<script>
import { RadioGroup, Tree } from 'veui'
export default {
components: {
'veui-radio-group': RadioGroup,
'veui-tree': Tree
},
data () {
return {
modes: [
{ label: 'none', value: 'none' },
{ label: 'toggle', value: 'toggle' }
],
mode: 'toggle',
expanded: ['infused', 'brewed'],
coffees: [
{
label: 'Infused',
value: 'infused',
children: [
{
label: 'Brewed',
value: 'brewed',
children: [
{
label: 'Drip brewed',
value: 'drip-brewed'
},
{
label: 'Filtered',
value: 'filtered'
},
{
label: 'Pour-over',
value: 'pour-over'
},
{
label: 'Immersion brewed',
value: 'immersion-brewed'
}
]
},
{
label: 'French press',
value: 'french-press'
},
{
label: 'Cold brew',
value: 'cold-brew'
}
]
},
{
label: 'Boiled',
value: 'boiled',
children: [
{
label: 'Percolated',
value: 'percolated'
},
{
label: 'Turkish',
value: 'turkish'
},
{
label: 'Moka',
value: 'moka'
}
]
},
{
label: 'Espresso',
value: 'espresso',
children: [
{
label: 'Caffè Americano',
value: 'caffe-americano'
},
{
label: 'Cafe Lungo',
value: 'cafe-lungo'
},
{
label: 'Café Cubano',
value: 'cafe-cubano'
},
{
label: 'Caffè crema',
value: 'caffe-crema'
},
{
label: 'Cafe Zorro',
value: 'cafe-zorro'
},
{
label: 'Doppio',
value: 'doppio'
},
{
label: 'Espresso Romano',
value: 'espresso-romano'
},
{
label: 'Guillermo',
value: 'guillermo'
},
{
label: 'Ristretto',
value: 'ristretto'
}
]
},
{
label: 'Milk coffee',
value: 'milk-coffee',
children: [
{
label: 'Flat white',
value: 'flat-white'
},
{
label: 'Latte',
value: 'latte'
},
{
label: 'Macchiato',
value: 'macchiato'
},
{
label: 'Cappuccino',
value: 'cappuccino'
},
{
label: 'White coffee',
value: 'white-coffee'
},
{
label: 'Flat white',
value: 'flat-white'
},
{
label: 'Flat white',
value: 'flat-white'
}
]
}
]
}
}
}
</script>自定义内容
Custom label
- Infused
- Boiled
- Espresso
- Milk coffee
Custom item
- Infused
- Boiled
- Espresso
- Milk coffee
<template>
<article>
<section>
<h4>Custom label</h4>
<veui-tree
:datasource="coffees"
item-click="toggle"
>
<template
slot="item-label"
slot-scope="{ item }"
>
<i>{{ item.label }}</i>
</template>
</veui-tree>
</section>
<section>
<h4>Custom item</h4>
<veui-tree
:datasource="coffees"
item-click="toggle"
class="custom-item"
>
<template
slot="item"
slot-scope="{ children, expanded, label }"
>
<veui-icon
v-if="children && children.length"
:name="expanded ? 'minus' : 'plus'"
/>
{{ label }}
</template>
</veui-tree>
</section>
</article>
</template>
<script>
import { Tree, Icon } from 'veui'
import 'veui-theme-one-icons/plus'
import 'veui-theme-one-icons/minus'
export default {
components: {
'veui-tree': Tree,
'veui-icon': Icon
},
data () {
return {
coffees: [
{
label: 'Infused',
value: 'infused',
children: [
{
label: 'Brewed',
value: 'brewed',
children: [
{
label: 'Drip brewed',
value: 'drip-brewed'
},
{
label: 'Filtered',
value: 'filtered'
},
{
label: 'Pour-over',
value: 'pour-over'
},
{
label: 'Immersion brewed',
value: 'immersion-brewed'
}
]
},
{
label: 'French press',
value: 'french-press'
},
{
label: 'Cold brew',
value: 'cold-brew'
}
]
},
{
label: 'Boiled',
value: 'boiled',
children: [
{
label: 'Percolated',
value: 'percolated'
},
{
label: 'Turkish',
value: 'turkish'
},
{
label: 'Moka',
value: 'moka'
}
]
},
{
label: 'Espresso',
value: 'espresso',
children: [
{
label: 'Caffè Americano',
value: 'caffe-americano'
},
{
label: 'Cafe Lungo',
value: 'cafe-lungo'
},
{
label: 'Café Cubano',
value: 'cafe-cubano'
},
{
label: 'Caffè crema',
value: 'caffe-crema'
},
{
label: 'Cafe Zorro',
value: 'cafe-zorro'
},
{
label: 'Doppio',
value: 'doppio'
},
{
label: 'Espresso Romano',
value: 'espresso-romano'
},
{
label: 'Guillermo',
value: 'guillermo'
},
{
label: 'Ristretto',
value: 'ristretto'
}
]
},
{
label: 'Milk coffee',
value: 'milk-coffee',
children: [
{
label: 'Flat white',
value: 'flat-white'
},
{
label: 'Latte',
value: 'latte'
},
{
label: 'Macchiato',
value: 'macchiato'
},
{
label: 'Cappuccino',
value: 'cappuccino'
},
{
label: 'White coffee',
value: 'white-coffee'
},
{
label: 'Flat white',
value: 'flat-white'
},
{
label: 'Flat white',
value: 'flat-white'
}
]
}
]
}
}
}
</script>
<style lang="less" scoped>
.custom-item {
& /deep/ .veui-tree-item {
position: relative;
padding-left: 24px;
}
& /deep/ .veui-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
}
</style>API
属性
| 名称 | 类型 | 默认值 | 描述 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
datasource | Array<Object> | [] | 数据源数组，每个项目类型为
| ||||||||||||
item-click | string | 'none' | 点击整个节点区域进行的操作类型。
| ||||||||||||
expanded | Array | [] |
指定当前展开的节点，是一个对应于 |
插槽
| 名称 | 描述 | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
item | 每个节点的整个内容区域。
另外， | ||||||||||||||||||
item-label | 每个节点的文本区域。作用域参数与 item 插槽一致。 |
事件
| 名称 | 描述 | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
click | 点击节点触发，回调参数为
| |||||||||||||||
expand | 节点展开时触发。回调参数为
| |||||||||||||||
collapse | 点击收起图标或者整个节点时触发，由
|
图标
| 名称 | 描述 |
|---|---|
expand | 收起状态，点击后展开。 |
collapse | 展开状态，点击后收起。 |