Vuetify Treeview - 选择父级节点而不选择其子级节点

Question

使用Vuetify的treeview组件时，我尝试选择一个父项而不会也同时选择所有子项（后代）。我尝试了各种可选、活动等等的组合，但似乎找不到适当的组合。请问有什么指导可以实现这个期望的结果吗？

- Jon B.

---

你希望在 selectable 上添加此功能，以便在选择父级时不会选中任何子级吗？还是希望在所有子级都被选中时返回父级？ - DjSh

Answer 1

我也遇到了相同的问题，只需在您的树形组件中添加 selection-type="independent" 属性即可解决。

更新：CodePen 示例 https://codepen.io/anon/pen/LwOJRE

文档 https://vuetifyjs.com/en/components/treeview#selection-type

- Александр Алибутаев

---

很不幸，我正在使用Vuetify 1.5，但它不支持该版本。而且我无法升级。有什么解决方法吗？ - Peter

Answer 2

我已经创建了一个 jsFiddle 来实现这个结果：https://jsfiddle.net/g50odsmy/。

Vue.use(Vuetify);

var vm = new Vue({
    el: "#app",
  computed: {
    treeParents: function() {
      let tree = [...this.tree];
      // Filter tree with only parents of selections
      tree = tree.filter(elem => {
        for (let i = 0; i < tree.length; i++) {
            // Skip current element
          if (tree[i].id === elem.id) continue;

                    // Check only elements with childrens
          if (tree[i].children) {
            let item = this.findTreeItem([tree[i]], elem.id);
            // If current element is a children of another element, exclude from result
            if (item) {
              return false;
            }
          }
        }
        return true;
      });
      return tree;
    }
  },
  methods: {
    findTreeItem(items, id) {
      if (!items) {
        return;
      }

      for (const item of items) {
        // Test current object
        if (item.id === id) {
          return item;
        }

        // Test children recursively
        const child = this.findTreeItem(item.children, id);
        if (child) {
          return child;
        }
      }
    }
  },
  data: () => ({
    open: ["public"],
    files: {
      html: "mdi-language-html5",
      js: "mdi-nodejs",
      json: "mdi-json",
      md: "mdi-markdown",
      pdf: "mdi-file-pdf",
      png: "mdi-file-image",
      txt: "mdi-file-document-outline",
      xls: "mdi-file-excel"
    },
    tree: [],
    items: [
      {
        id: ".git",
        name: ".git"
      },
      {
        id: "node_modules",
        name: "node_modules"
      },
      {
        id: "public",
        name: "public",
        children: [
          {
            id: "static",
            name: "static",
            children: [
              {
                id: "logo.png",
                name: "logo.png",
                file: "png"
              }
            ]
          },
          {
            id: "favicon.ico",
            name: "favicon.ico",
            file: "png"
          },
          {
            id: "index.html",
            name: "index.html",
            file: "html"
          }
        ]
      },
      {
        id: ".gitignore",
        name: ".gitignore",
        file: "txt"
      },
      {
        id: "babel.config.js",
        name: "babel.config.js",
        file: "js"
      },
      {
        id: "package.json",
        name: "package.json",
        file: "json"
      },
      {
        id: "README.md",
        name: "README.md",
        file: "md"
      },
      {
        id: "vue.config.js",
        name: "vue.config.js",
        file: "js"
      },
      {
        id: "yarn.lock",
        name: "yarn.lock",
        file: "txt"
      }
    ]
  }),
});

<link href="https://unpkg.com/vuetify@1.5.6/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.6/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
  <v-app>
    <v-layout row wrap>
      <v-flex>
        <v-treeview
          v-model="tree"
          :items="items"
          activatable
          active-class="grey lighten-4 indigo--text"
          selected-color="indigo"
          open-on-click
          selectable
          transition
          return-object
          hoverable
        ></v-treeview>
      </v-flex>
    </v-layout>
    <v-layout row wrap>
      <v-flex xs6 style="border: 2px solid red"><v-chip>Current mode:</v-chip> {{tree}}</v-flex>
      <v-flex xs6 style="border: 2px solid green"><v-chip>Only parents:</v-chip> {{treeParents}}</v-flex>
      <v-flex xs6 style="border: 2px solid red"># selected: {{tree.length}}</v-flex>
      <v-flex xs6 style="border: 2px solid green"># selected: {{ treeParents.length}}</v-flex>
    </v-layout>
  </v-app>
</div>

在treeParents变量中，如果选择了一个父级，则我会过滤掉所有子级。这个解决方案强制你也要保存原始树以便稍后重新加载相同的数据，但是我已经在Vuetify GitHub项目页面上开了一个功能请求https://github.com/vuetifyjs/vuetify/issues/6759，希望有时间更好地探索组件，看看是否可以发起拉取请求。

- Simone Nunzi