使用vue根据元素ui树中的文件夹选择过滤文件 [英] filter files based on folder selection in element ui tree with vue

问题描述

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

 数据:[{编号:1，标签:'一级 1'，类型:'文件夹'，孩子们: [{编号:4，标签:'二级 1-1'，类型:'文件夹'，孩子们: [{ id: 9, label: 'Level 3 1-1-1', type: 'file'},{ id: 10, label: 'Level 3 1-1-2', type: 'file' }]}]}, {编号:2，标签:'一级 2'，类型:'文件夹'，孩子们: [{ id: 5, label: 'Level 2 2-1', type: 'file'},{ id: 6, label: 'Level 2 2-2', type: 'file'}]}, {编号:3，标签:'一级 3'，类型:'文件夹'，孩子们: [{ id: 7, label: 'Level 2 3-1', type: 'file'},{ id: 8, label: 'Level 2 3-2', type: 'file'}]}]

这是我的树的代码片段:

<el-col :span=6"><div class="folder-content"><el树节点键=id":数据=数据"手风琴@node-click="nodeclicked";ref=树"风格=背景:#f2f2f2"；高亮当前><span class="custom-tree-node";slot-scope={节点，数据}"><span class="icon-folder";v-if="data.type === '文件夹'"><i class="el-icon-folder";aria-hidden=真"></i><span class="icon-folder_text";>{{ data.name }}</span></span></span></el-tree>

</el-col><el-col :span=12"><div class=entry-content"><ul><li aria-expanded="false";v-for=(file,index) in files":key=索引"><span class="folder__list"><input type="checkbox":id=文件":value=文件"><i class="el-icon-document";aria-hidden=真"></i><span class="folder__name">{{file.name}}</span></span></div></el-col><el-col :span=6"><div class=preview_content"></div></el-col></el-row>

如何在遍历第一个文件夹及其树中的子节点时列出这些文件?请给我建议.我想如下显示:

如果我选择第一个文件夹或者它的孩子.然后与此关联的文件显示在列表中，例如文件浏览"

解决方案

当你从树中得到 node 时，你可以访问子节点(方法提供的节点不包含任何子数据)，但是如果您想在不同的容器中而不是在树中显示文件，您可能会自己在数据中使用 javascript 进行搜索.

var Main = {方法: {节点点击(节点){console.log(this.$refs.tree.getNode(node.id).data.children)}},数据() {返回 {数据: [{编号:1，标签:'一级 1'，类型:'文件夹'，孩子们: [{编号:4，标签:'二级 1-1'，类型:'文件夹'，孩子们: [{ id: 9, label: 'Level 3 1-1-1', type: 'file'},{ id: 10, label: 'Level 3 1-1-2', type: 'file' }]}]}, {编号:2，标签:'一级 2'，类型:'文件夹'，孩子们: [{ id: 5, label: 'Level 2 2-1', type: 'file'},{ id: 6, label: 'Level 2 2-2', type: 'file'}]}, {编号:3，标签:'一级 3'，类型:'文件夹'，孩子们: [{ id: 7, label: 'Level 2 3-1', type: 'file'},{ id: 8, label: 'Level 2 3-2', type: 'file'}]}],默认道具:{儿童:'儿童'，标签:'标签'}}}};var Ctor = Vue.extend(Main)newctor().$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="应用程序"><el-tree节点键=id":数据=数据":props="defaultProps"手风琴@node-click="nodeclicked"参考=树"><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>

I am using element ui treeview to display folders. There are some files for each folder or their child folder. I have to list out those files based on folder selection. I can filter out those in normal list. But, i am not able to do that using element ui tree view. Please suggest me how to do that for tree node. Here is the sample data:

   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'}]
    }]

Here is my tree's code snippet :

<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>

how to list out those files while traversing first folder and it's child node in that tree? Please suggest me on this. I want to display like this below:

If i choose first folder or it's children. Then files associated with this display in a list like 'File Browsing'

解决方案

When you get the node from the tree you could access the children (node provided by the method doesn't contain any child data), but if you want display the files in a different container and not in the tree you probably search with javascript in the data yourself.

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>

这篇关于使用vue根据元素ui树中的文件夹选择过滤文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！