无法选择Vuetify树节点

时间:2019-11-15 18:45:54

标签: vue.js treeview vuetify.js

我正在尝试使用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>

我想在单击叶节点时获得返回的构建名称,以便可以动态添加更多子代。

0 个答案:

没有答案