使用 vue 根据元素 ui 树中的文件夹选择过滤文件

Question

我正在使用元素 ui 树视图来显示文件夹。每个文件夹或其子文件夹都有一些文件。我必须根据文件夹选择列出这些文件。我可以过滤掉正常列表中的那些。但是，我无法使用元素 ui 树视图来做到这一点。请建议我如何为树节点执行此操作。这是示例数据：

   data: [{
      id: 1,
      label: 'Level one 1',
      type: 'folder',
      children: [{
        id: 4,
        label: 'Level two 1-1',
        type: 'folder',
        children: [
          { id: 9, label: 'Level three 1-1-1', type: 'file'}, 
          { id: 10, label: 'Level three 1-1-2', type: 'file' }]
      }]
    }, {
      id: 2,
      label: 'Level one 2',
      type: 'folder',
      children: [
        { id: 5, label: 'Level two 2-1', type: 'file'}, 
        { id: 6, label: 'Level two 2-2', type: 'file'}]
    }, {
      id: 3,
      label: 'Level one 3',
      type: 'folder',
      children: [
        { id: 7, label: 'Level two 3-1', type: 'file'}, 
        { id: 8, label: 'Level two 3-2', type: 'file'}]
    }]

这是我的树的代码 sn-p：

<el-row style="background: #f2f2f2">
                  <el-col :span="6">
                   <div class="folder-content">
                     <el-tree
                         node-key="id"
                         :data="data"
                         accordion
                         @node-click="nodeclicked"
                         ref="tree"
                         style="background: #f2f2f2"
                         highlight-current
                         >
                         <span class="custom-tree-node" slot-scope="{ node, data }">
                             <span class="icon-folder" v-if="data.type === 'folder'">
                              <i class="el-icon-folder" aria-hidden="true"></i>
                              <span class="icon-folder_text" >{{ data.name }}</span>
                             </span>
                         </span>
                     </el-tree>
                   </div>
                 </el-col>
                 <el-col :span="12"><div class="entry-content">
                  <ul>
                      <li aria-expanded="false" v-for="(file,index) in files" :key="index">
                           <span class="folder__list"><input type="checkbox" :id= "file" :value="file">
                           <i class="el-icon-document" aria-hidden="true"></i>
                          <span class="folder__name">{{file.name}}</span></span>
                     </li>
                 </ul>
                   </div></el-col>
                 <el-col :span="6"><div class="preview_content"></div></el-col>
               </el-row>

如何在遍历第一个文件夹及其树中的子节点时列出这些文件？请就此向我提出建议。我想显示如下：

如果我选择第一个文件夹或其子文件夹。然后与此关联的文件会显示在类似“File Browsing”的列表中

Answer 1

当您从树中获取 node 时，您可以访问子节点（该方法提供的节点不包含任何子数据），但是如果您想在不同的容器中而不是在树中显示文件，您可以可能自己在数据中使用javascript搜索。

var Main = {
    methods: {
      nodeclicked(node) {
        console.log(this.$refs.tree.getNode(node.id).data.children)
      }
    },
    data() {
      return {
        data: [{
          id: 1,
          label: 'Level one 1',
          type: 'folder',
          children: [{
            id: 4,
            label: 'Level two 1-1',
            type: 'folder',
            children: [
              { id: 9, label: 'Level three 1-1-1', type: 'file'}, 
              { id: 10, label: 'Level three 1-1-2', type: 'file' }]
          }]
        }, {
          id: 2,
          label: 'Level one 2',
          type: 'folder',
          children: [
            { id: 5, label: 'Level two 2-1', type: 'file'}, 
            { id: 6, label: 'Level two 2-2', type: 'file'}]
        }, {
          id: 3,
          label: 'Level one 3',
          type: 'folder',
          children: [
            { id: 7, label: 'Level two 3-1', type: 'file'}, 
            { id: 8, label: 'Level two 3-2', type: 'file'}]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<div id="app">
  <el-tree
    node-key="id"
    :data="data"
    :props="defaultProps"
    accordion
    @node-click="nodeclicked"
    ref="tree">
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span class="icon-folder">
        <i v-if="data.type === 'folder'" class="el-icon-folder"></i>
        <i v-else-if="data.type === 'file'" class="el-icon-document"></i>
        <span class="icon-folder_text">{{ data.label }}</span>
      </span>
    </span>
  </el-tree>
</div>

Answer 2

var Main = {
  data() {
    return {
      data: [{
          id: 1,
          name: 'folder 1',
          type: 'folder',
          children: [{
            id: 4,
            name: 'subFiles 1-1',
            type: 'folder',
            children: []
          }, {
            id: 11,
            name: 'files 1-1',
            type: 'file'
          }, {
            id: 12,
            name: 'files 1-2',
            type: 'file'
          }]
        },
        {
          id: 2,
          name: 'folder 2',
          type: 'folder',
          children: []
        },
        {
          id: 3,
          name: 'folder 3',
          type: 'folder',
          children: []
        }
      ]
    };
  },
  methods: {
    handleNodeClick() {}
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>

<div id="app">
  <el-tree :data="data" accordion @node-click="handleNodeClick">
    <span class="custom-tree-node" slot-scope="{ node, data }">
                                 <span class="icon-folder">
                                  <i v-if="data.type === 'folder'" class="el-icon-folder" aria-hidden="true"></i>
                                   <i v-else-if="data.type === 'file'" class="el-icon-document" aria-hidden="true"></i>
                                  <span class="icon-folder_text">{{ data.name }}</span>
    </span>
    </span>
  </el-tree>
</div>

ElementUI指定了data的数据结构，所以子树节点统一推送到children属性中，然后通过type属性来区分是folder还是file。