Vue实战篇十七：用树型组件实现一个文档目录结构

系列文章目录

Vue基础篇一：编写第一个Vue程序
Vue基础篇二：Vue组件的核心概念
Vue基础篇三：Vue的计算属性与侦听器
Vue基础篇四：Vue的生命周期（秒杀案例实战）
Vue基础篇五：Vue的指令
Vue基础篇六：Vue使用JSX进行动态渲染
Vue提高篇一：使用Vuex进行状态管理
Vue提高篇二：使用vue-router实现静态路由
Vue提高篇三：使用vue-router实现动态路由
Vue提高篇四：使用Element UI组件库
Vue提高篇五：使用Jest进行单元测试
Vue提高篇六： 使用Vetur+ESLint+Prettier插件提升开发效率
Vue实战篇一： 使用Vue搭建注册登录界面
Vue实战篇二： 实现邮件验证码发送
Vue实战篇三：实现用户注册
Vue实战篇四：创建多步骤表单
Vue实战篇五：实现文件上传
Vue实战篇六：表格渲染动态数据
Vue实战篇七：表单校验
Vue实战篇八：实现弹出对话框进行交互
Vue实战篇九：使用省市区级联选择插件
Vue实战篇十：响应式布局
Vue实战篇十一：父组件获取子组件数据的常规方法
Vue实战篇十二：多项选择器的实际运用
Vue实战篇十三：实战分页组件
Vue实战篇十四：前端excel组件实现数据导入
Vue实战篇十五：表格数据多选在实际项目中的技巧
Vue实战篇十六：导航菜单
Vue实战篇十七：用树型组件实现一个知识目录

---

一、背景

• 树型组件在具有父子关系的数据展示中会经常用到，比如：

1. 一个树状的部门列表，可以展示出部门的上下级关系。
2. 一个树状的文档目录结构，可以极大地方便操作人员检索文件。

二、Element Tree

• Tree 树形控件用清晰的层级结构展示信息，可展开或折叠。

<el-tree :data="data"  @node-click="handleNodeClick"></el-tree>
<script>
  export default {
    
    data() {
    
      return {
    
        // 树型数据的组成类似于json嵌套结构
        data: [{
           
          {
    
            // 一级数据
          label: '一级 1',
             // 一级数据
            children: [{
    
             // 二级子数据 
             label: '二级 1-1',
              children: [{
    
                // 三级子数据 
               label: '三级 1-1-1'
              }]
             }]
          }
        }]
      };
    },
    methods: {
    
      handleNodeClick(data) {
    
        console.log(data);
      }
    }
  };
</script>

三、用树型组件实现一个文档目录结构

• 利用树型组件的嵌套结构，建立一个产品开发文档目录，并可以按关键字进行过滤筛选

<template>
  <div class="sidebar">
    <div class="ui-layout-pane ui-layout-pane-west">

      <el-form id="searchForm">
        <el-form-item>
          <el-input
            v-model="filterText"
            placeholder