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.

varMain = {
    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'
        }
      }
    }
  };
varCtor = Vue.extend(Main)
newCtor().$mount('#app')

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

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

Solution 2:

varMain = {
  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() {}
  }
}
varCtor = Vue.extend(Main)
newCtor().$mount('#app')

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

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script><scriptsrc="//unpkg.com/element-ui@2.13.0/lib/index.js"></script><divid="app"><el-tree:data="data"accordion @node-click="handleNodeClick"><spanclass="custom-tree-node"slot-scope="{ node, data }"><spanclass="icon-folder"><iv-if="data.type === 'folder'"class="el-icon-folder"aria-hidden="true"></i><iv-else-if="data.type === 'file'"class="el-icon-document"aria-hidden="true"></i><spanclass="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.