CODEWITHSUNDEEP
javascriptvue.jsvuejs2treeviewelement-ui
learningMonk
learningMonk

Reputation: 1401

filter files based on folder selection in element ui tree with vue

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: simple File browsing

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

Upvotes: 0

Views: 1679

Answers (2)

dreijntjens
dreijntjens

Reputation: 4835

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/[email protected]/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/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>

Upvotes: 1

sugars
sugars

Reputation: 1493

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/[email protected]/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/[email protected]/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 specifies the data structure of data, so the subtree node are unified push in children property, and then use the type property to distinguish whether it is a folder or a file.

Upvotes: 0

Related Questions