Vue.js 实现树形结构管理系统的前端设计与实现

在现代前端开发中，树形结构被广泛应用于各类数据管理系统，尤其是在需要展示层级关系的场景中。本文将从前端开发的角度出发，具体分析如何利用 Vue.js 实现一个机动的树形结构管理系统，重点介绍前端代码的实现和设计思路。
项目配景

树形结构通常用于表示具有层级关系的数据，如目录、文件、分类等。在这个项目中，我们需要实现一个前端页面，允许用户对数据进行搜刮、展示、编辑和删除等操作。该系统是一个典范的数据管理工具，适用于内容管理系统（CMS）或任何需要展示和管理层级数据的应用。
通过利用 Vue.js 和 Element UI 组件库，我们可以快速构建出一个功能强大且易于利用的树形结构管理系统。以下将具体介绍实现的具体思路及相关代码。
项目亮点

1. 树形结构展示与操作

树形结构的核心部门是展示数据，并提供各种操作按钮（如新增、编辑、删除）。在 Vue.js 中，我们可以通过 el-tree 组件来实现树形结构的展示。每个树节点的内容和操作按钮都通过插槽（slot）自定义，以满意不同节点层级的需求。

1. <el-tree ref="tree" :data="filteredTreeOptionslist" node-key="id" :props="defaultProps" highlight-current
2.           style="font-size: 14px" :default-expanded-keys="[0]" :expand-on-click-node="false"
3.           :filter-node-method="filterNode">
4.   <template slot-scope="{ node, data }">
5.     <span class="custom-tree-node">
6.       <span @click="handleNodeClick(data)">
7.         <i v-if="node.level == 2" class="el-icon-folder-opened" style="font-size: 16px;" />
8.         {{ data.name }}
9.       </span>
10.       <span class="tree-bts">
11.         <i v-if="node.level != 2" class="el-icon-circle-plus-outline bt-add" @click="() => handleAddContrast(data)" />
12.         <i v-if="node.level != 1 && data.id != 0 && data.id != 1" class="el-icon-edit-outline bt-edit"
13.            @click="() => handleEditContrast(data)" />
14.         <i v-if="node.level != 1 && data.id != 0 && data.id != 1" class="el-icon-delete bt-delete"
15.            @click="() => handleDelContrast(data)" />
16.       </span>
17.     </span>
18.   </template>
19. </el-tree>

复制代码

表明：

• 利用 el-tree 组件展示树形数据，并通过 filter-node-method 进行节点过滤。
  
• 通过插槽（slot-scope）自定义每个节点的展示，条件渲染不同层级的节点和操作按钮。
  
• 为树形节点添加交互功能（例如，点击节点展开/折叠）。
  

2. 实时搜刮与动态过滤树形数据

用户可以通过搜刮框来快速定位到树形结构中的目标节点。每当用户输入搜刮内容时，前端会动态过滤树节点，保证用户在巨大的树形数据中快速找到目标节

1. <el-input v-model="sourceName" placeholder="请输入名称搜索" clearable size="small" prefix-icon="el-icon-search"
2.           style="margin-bottom: 20px" />
4. <el-tree ref="tree" :data="filteredTreeOptionslist" node-key="id" :props="defaultProps" highlight-current
5.           :filter-node-method="filterNode">
6. </el-tree>

复制代码

表明：

• v-model="sourceName" 实现搜刮框和树形数据之间的双向绑定。
  
• filter-node-method="filterNode" 通过自定义过滤函数来实时过滤树节点。
  
• 当 sourceName 改变时，调用 filterNode 函数过滤树节点。
  

3. 数据增删改操作与表单管理

在这个系统中，用户可以进行节点的新增、编辑和删除操作。每个操作都会通过弹出的对话框进行表单提交，表单包罗目录名称、标识符等信息。表单的提交过程包含了数据验证，确保用户输入的内容符合要求。

1. <el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px" :close-on-click-modal="false"
2.            append-to-body>
3.   <div class="container">
4.     <el-form ref="typeForm" :model="typeFrom" :rules="rules" label-width="100px">
5.       <el-row>
6.         <el-col :span="20">
7.           <el-form-item label="目录名称：" prop="name">
8.             <el-input v-model="typeFrom.name" maxlength="20" placeholder="目录名称" style="width: 70%" />
9.           </el-form-item>
10.         </el-col>
11.       </el-row>
12.       <el-row>
13.         <el-col :span="20">
14.           <el-form-item label="标识符：" prop="code">
15.             <el-input v-model="typeFrom.code" placeholder="标识符" style="width: 70%" maxlength="20" />
16.           </el-form-item>
17.         </el-col>
18.       </el-row>
19.     </el-form>
20.   </div>
21.   <div slot="footer" class="dialog-footer">
22.     <el-button size="mini" @click="cancel">关 闭</el-button>
23.     <el-button type="primary" size="mini" @click="typeSubmitForm">确 定</el-button>
24.   </div>
25. </el-dialog>

复制代码

表明

• el-dialog 用于弹出表单对话框，允许用户填写或编辑树节点的内容。
  
• 表单通过 el-form 和 el-form-item 进行结构，并设置校验规则（如名称和标识符不能为空）。
  
• 提交表单时，会根据数据的状态（新增或编辑）调用不同的 API 接口，更新树形数据。
  

4. 树形数据的深度复制与展开控制

树形数据通常需要深度复制，以确保每个节点的状态（如展开状态）不会互干系扰。同时，我们还需要控制树形节点的展开与折叠，特别是在数据量较大的时候。

1. // 深度复制树形数据
2. deepCopy(nodes, level) {
3.   return nodes.map(node => {
4.     const newNode = { ...node };
5.     if (level < 2) {
6.       newNode.expanded = true;  // 默认展开前两层
7.     }
8.     if (node.children) {
9.       newNode.children = this.deepCopy(node.children, level + 1);  // 递归复制子节点
10.     }
11.     return newNode;
12.   });
13. },

复制代码

表明：

• deepCopy 方法深度复制树形节点数据，确保每一层的节点状态独立。
  
• 默认展开前两层，提供更好的用户体验。
  

5. 表单校验与数据合法性

在用户提交表单之前，我们需要对用户输入的数据进行校验。通过 Vue.js 的表单验证功能，我们可以确保用户提交的数据符合规定的格式，例如正整数、非空等。

1. rules: {
2.   name: [{ required: true, message: '目录名称不能为空', trigger: 'blur' }],
3.   code: [{ required: true, message: '标识符不能为空', trigger: 'blur' }],
4.   sortOrder: [
5.     { required: true, message: '请输入正整数', trigger: 'blur' },
6.     { validator: this.validateIntegerInput, trigger: 'blur' }
7.   ]
8. },
9. validateIntegerInput(rule, value, callback) {
10.   if (!/^[0-9]{1,4}$/.test(value)) {
11.     callback(new Error('请输入1到4位的正整数'));
12.   } else {
13.     callback();
14.   }
15. },

复制代码

表明：

• rules 定义了表单字段的校验规则，确保目录名称、标识符等字段不能为空。
  
• validateIntegerInput 是一个自定义的校验函数，确保用户输入的是一个1到4位的正整数。
  

6. 提交表单并更新树形数据

在完成表单的填写和校验后，用户可以提交表单。表单提交后，前端会调用对应的 API 接口进行数据的新增或更新，并根据返回结果更新树形数据。

1. typeSubmitForm() {
2.   this.$refs.typeForm.validate(valid => {
3.     if (valid) {
4.       if (this.typeFrom.id != null) {
5.         updateRuleType(this.typeFrom).then((response) => {
6.           this.$message.success("修改成功");
7.           this.dialogFormVisible = false;
8.           this.getTree();
9.           this.reset();
10.         });
11.       } else {
12.         addRuleType(this.typeFrom).then((response) => {
13.           this.$message.success("新增成功");
14.           this.dialogFormVisible = false;
15.           this.getTree();
16.           this.reset();
17.         });
18.       }
19.     } else {
20.       return false;
21.     }
22.   });
23. },

复制代码

表明：

• typeSubmitForm 用于提交表单，调用 addRuleType 或 updateRuleType 函数根据表单数据进行增删改操作。
  

总结

本文通过一个树形结构管理系统的实现，展示了如何利用 Vue.js 和 Element UI 组件来处理复杂的数据展示和操作。通过机动的组件化设计、实时搜刮与过滤、表单校验与提交等技能，前端开发可以有用地管理和展示层级结构数据。对于开发者来说，如许的系统提供了许多值得借鉴的设计思路和实现方式，特别是在数据管理和用户交互方面的优化。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。