我正在尝试使用Vuetify框架实现Treeview组件。除非我在treeview组件中使用“ selectable”选项,否则无法返回所选节点。但是,selectable在我不需要的每个节点前面都提供了复选框。
<script>
export default {
data() {
return {
width: 300,
flat: false,
media: true,
loading: false,
actions: true,
outlined: true,
elevation: undefined,
raised: false,
height: undefined,
tree: [],
list_of_build_names2: [
{
name: "2017.0",
id: "0",
children: [
{
name: "1.0",
id: "6",
children: [
{ name: "build_test1", id: "2" },
{ name: "build_test5", id: "3" }
]
}
]
},
{
name: "2018.0",
id: "1",
children: [
{
name: "1.0",
id: 5,
children: [{ name: "build_test2", id: "4" }]
}
]
}
],
list_of_build_names21: {
id: "23",
name: "root",
children: [
{
name: "2017.0",
id: "0",
children: [
{
name: "1.0",
id: "6",
children: [
{ name: "build_test1", id: "2" },
{ name: "build_test5", id: "3" }
]
}
]
},
{
name: "2018.0",
id: "1",
children: [
{
name: "1.0",
id: 5,
children: [{ name: "build_test2", id: "4" }]
}
]
}
]
},
list_of_build_names: [],
};
}
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div>
<!-- This card is just for demonstrating another UI component-->
<v-card :flat="flat" :loading="loading" :elevation="elevation" :width="width" :height="height">
<v-card-title>Builds List</v-card-title>
<v-card-actions>
<v-treeview
v-model="tree"
:items="list_of_build_names2"
caption-field="name"
children-field="children"
keyField="name"
open-on-click
select
/>
</v-card-actions>
</v-card>
<div>Selected Build is {{ tree }}</div>
</div>
</template>
我想在单击叶节点时获得返回的构建名称,以便可以动态添加更多子代。