树状图选择
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| <template>
<v-container>
<v-select v-model="selectionType" :items="['leaf', 'independent']" label="Selection type"></v-select>
<v-row>
<v-col>
<v-treeview
v-model="selection"
:items="items"
:selection-type="selectionType"
color="primary"
shaped
dense
selectable
activatable
hoverable
return-object
open-all
></v-treeview>
</v-col>
<v-divider vertical></v-divider>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
selectionType: "leaf",
selection: [],
items: [
{
id: 1,
name: "Root",
children: [
{ id: 2, name: "Child 1" },
{ id: 3, name: "Child 2" },
{
id: 4,
name: "Child 3",
children: [
{ id: 5, name: "Grandchild 1" },
{ id: 6, name: "Grandchild 2" },
],
},
],
},
],
}),
};
</script>
|
说明：selection-type 控制树形视图如何选择节点。 有两种模式可用：‘leaf’ 和 ‘independent’。默认当我们选择父节点时，它将包括节点的叶子leaf，另一种类型是 ，它允许我们单独选择所有节点：'independent。selectable 将在每个节点旁边渲染一个复选框，以允许选择它们。 return-object 当 true 时，v-model、active.sync 和 open.sync 将返回完整的对象而不是只是键。activatable 可激活。hoverable 可悬停。我们有一个状态，其中包含一个项目数组。items
每个对象都具有 and 属性，其中包含要显示的节点 ID 和名称。id``name
该属性具有一个数组，其中包含具有相同属性的对象。children
然后我们把它传递给 的道具。v-treeview item我们可以使用道具使条目占用更少的空间：dense 。color 单击条目时显示背景色。
shaped 角落将在右侧变圆，换成 rounded 则两侧都变圆。 item-disabled="locked" 用来禁用包含属性值 locked 且为 true 的结点。
时间轴
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <template>
<v-timeline align-top reverse dense>
<v-timeline-item fill-dot right small icon="" color="">
<template v-slot:opposite>
<span>Foo</span>
</template>
<v-card>
<v-card-title>
<v-icon>mdi-magnify</v-icon>
<h2>Title 1</h2>
</v-card-title>
<v-container>
<v-row>
<v-col>Lorem ipsum dolor sit amet, no nam oblique veritus.</v-col>
</v-row>
</v-container>
</v-card>
</v-timeline-item>
</v-timeline>
</template>
|
说明：align-top 图标与卡片上对齐，revese 反转左右，dense 让卡片更密集。fill-dot使点被填充，没有白边框，right 和 left 控制卡片位置，icon 和 color 控制显示图标和颜色。opposite 插槽插入卡片对面。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <template>
<v-card class="mx-auto" max-width="600">
<v-card-title class="blue-grey white--text">
<span class="title">Logs</span>
</v-card-title>
<v-card-text class="py-0">
<v-timeline dense>
<v-slide-x-reverse-transition group hide-on-leave>
<v-timeline-item v-for="item in items" :key="item.id" :color="item.color" small fill-dot>
<v-alert
:value="true"
:color="item.color"
:icon="item.icon"
class="white--text"
>Lorem ipsum dolor sit amet.</v-alert>
</v-timeline-item>
</v-slide-x-reverse-transition>
</v-timeline>
</v-card-text>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
items: [
{
id: 1,
color: "red lighten-2",
icon: "mdi-star",
},
{
id: 2,
color: "purple darken-1",
icon: "mdi-book-variant",
},
{
id: 3,
color: "green lighten-1",
icon: "mdi-airballoon",
},
],
}),
};
</script>
|
