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 filte

Solution 1:

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>

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