Vue实战篇十七：用树型组件实现一个文档目录结构_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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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

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

<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="搜索目录..."
            class="input-with-select"
          >

          </el-input>
        </el-form-item>
        <el-form-item>
          <h3>知识目录</h3>
          <hr />
        </el-form-item>
        <el-form-item>
          <div>
            <el-scrollbar wrap-class="scrollbar-wrapper" style="height:100%">
              <el-tree
                ref="tree"
                :data="data"
                :props="defaultProps"
                :default-expand-all="true"
                :filter-node-method="filterNode"
                @node-click="handleNodeClick"
              >
              </el-tree>
            </el-scrollbar>
          </div>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      filterText: '',
      // mock数据
      data: [{
        id: '1',
        label: 'WA',
        icon: 'el-icon-success',
        children: [{
          id: '1.1',
          label: '1.1 SQR相关',
          children: [
            {
              id: '1.1.1',
              label: 'QFD'
            },
            {
              id: '1.1.2',
              label: '产品开发要求规格'
            },
            {
              id: '1.1.3',
              label: '测试清单'
            }

          ]

        },
        {
          id: '1.2',
          label: '1.2 项目计划',
          children: [
            {
              id: '1.2.1',
              label: '项目开发计划'
            },
            {
              id: '1.2.2',
              label: '问题解决计划'
            },
            {
              id: '1.2.3',
              label: '送样计划 '
            }
          ]
        },
        {
          id: '1.3',
          label: '1.3 立项任务书'
        },
        {
          id: '1.4',
          label: '1.4 成本/BOM',
          children: [
            {
              id: '1.4.1',
              label: '项目成本要求'
            },
            {
              id: '1.4.2',
              label: '项目预算'
            },
            {
              id: '1.4.3',
              label: '项目实际花费'
            },
            {
              id: '1.4.4',
              label: 'BOM'
            }
          ]
        },
        {
          id: '1.5',
          label: '1.5 每阶段设计构想',
          children: [
            {
              id: '1.5.1',
              label: '设计构想书'
            },
            {
              id: '1.5.2',
              label: 'DOE方案'
            }
          ]
        },
        {
          id: '1.6',
          label: '1.6 试验/试产总结',
          children: [
            {
              id: '1.6.1',
              label: '试验总结'
            },
            {
              id: '1.6.2',
              label: '试产总结'
            }
          ]
        },
        {
          id: '1.7',
          label: '1.7 问题清单及问题解决报告',
          children: [
            {
              id: '1.7.1',
              label: '问题清单'
            },
            {
              id: '1.7.2',
              label: '问题解决报告'
            }
          ]
        },
        {
          id: '1.8',
          label: '1.8 FMEA',
          children: [
            {
              id: '1.8.1',
              label: 'DFMEA'
            },
            {
              id: '1.8.2',
              label: 'PFMEA'
            }
          ]
        },
        {
          id: '1.9',
          label: '1.9 CC/SC; PFD; CP',
          children: [
            {
              id: '1.9.1',
              label: 'CC/SC'
            },
            {
              id: '1.9.2',
              label: 'PFD'
            },
            {
              id: '1.9.3',
              label: 'CP'
            }
          ]
        },
        {
          id: '2.0',
          label: '2.0 生产工艺文件相关'
        },
        {
          id: '2.0',
          label: '2.0 生产工艺文件相关',
          children: [
            {
              id: '2.0.1',
              label: '生产规格书'
            },
            {
              id: '2.0.2',
              label: '测试清单'
            }
          ]
        },
        {
          id: '2.1',
          label: '2.1 图纸'
        },
        {
          id: '2.2',
          label: '2.2 各阶段评审报告'
        },
        {
          id: '2.3',
          label: '2.3 原材料规格书'
        }
        ]
      }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }

    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>
<style lang="scss" scoped>

.scrollbar-wrapper {
  overflow-x: hidden !important;
}

/**
 * layout
 */
 .sidebar{
     position: fixed;
     z-index: 4;
     margin-top: 64px;
 }
/* pane */
.ui-layout-pane {
//   border: 1px solid #bbb;
  height: 100%;
//   width : 230px;
}
/* main-left pane */
.ui-layout-pane-west {
  padding: 8px 10px;
  background-color: #f5f5f5 !important;
}

.el-tree {
  background-color: #f5f5f5 !important;
  min-height: 200px;
  max-height: 410px

}

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277

• 实现效果
  

• 关键字筛选