Question

在使用Vuetify中的树视图组件时，我试图能够选择一个父级不，同时还要选择所有后代（子级）。我尝试了可选，可激活等的各种组合...但是似乎找不到合适的组合。

任何人都有实现这一理想结果的指针吗？

Answer 1

我遇到了同样的问题，只需将selection-type="independent"属性添加到您的treeview组件

UPD：关于CodePen https://codepen.io/anon/pen/LwOJRE

的示例

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

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上打开了功能请求，希望有时间更好地探索该组件，看看是否可以发出拉动请求。

Vuetify树视图-选择父级而不选择子级

2 个答案: