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

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

在现代前端开发中，树形结构是一种常见的数据展示方式，尤其适用于需要展示层级关系的场景，如目录、文件、分类等。本文将详细介绍如何使用 Vue.js 和 Element UI 组件库实现一个功能强大且易于使用的树形结构管理系统。我们将从项目背景、实现思路、代码细节以及最终效果等方面进行阐述，帮助开发者快速掌握相关技术。

一、背景

树形结构管理系统是一种常见的数据管理工具，广泛应用于内容管理系统（CMS）、企业资源管理系统（ERP）以及各种需要展示和管理层级数据的应用中。它可以帮助用户快速定位和操作数据，提高工作效率。在本项目中，我们需要实现一个前端页面，允许用户对数据进行搜索、展示、编辑和删除等操作。

二、项目实现思路

（一）树形结构展示与操作

树形结构的核心是展示数据并提供操作功能。在 Vue.js 中，我们可以使用 Element UI 的`el-tree`组件来实现树形结构的展示。通过插槽（slot）机制，我们可以自定义每个节点的内容和操作按钮，以满足不同层级的需求。

以下是实现树形结构展示的代码示例：

html 复制代码

<el-tree

  ref="tree"

  :data="filteredTreeOptionslist"

  node-key="id"

  :props="defaultProps"

  highlight-current

  style="font-size: 14px"

  :default-expanded-keys="[0]"

  :expand-on-click-node="false"

  :filter-node-method="filterNode"

>

  <template slot-scope="{ node, data }">

    <span class="custom-tree-node">

      <span @click="handleNodeClick(data)">

        <i v-if="node.level == 2" class="el-icon-folder-opened" style="font-size: 16px;" />

        {{ data.name }}

      </span>

      <span class="tree-bts">

        <i

          v-if="node.level != 2"

          class="el-icon-circle-plus-outline bt-add"

          @click="() => handleAddContrast(data)"

        />

        <i

          v-if="node.level != 1 && data.id != 0 && data.id != 1"

          class="el-icon-edit-outline bt-edit"

          @click="() => handleEditContrast(data)"

        />

        <i

          v-if="node.level != 1 && data.id != 0 && data.id != 1"

          class="el-icon-delete bt-delete"

          @click="() => handleDelContrast(data)"

        />

      </span>

    </span>

  </template>

</el-tree>

代码解释：

• 使用`el-tree`组件展示树形数据，并通过`filter-node-method`属性实现节点过滤功能。

• 通过插槽（`slot-scope`）自定义每个节点的展示内容，条件渲染不同层级的节点和操作按钮。

• 为树形节点添加交互功能，例如点击节点展开/折叠。

（二）实时搜索与动态过滤树形数据

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

以下是实现搜索功能的代码示例：

html 复制代码

<el-input

  v-model="sourceName"

  placeholder="请输入名称搜索"

  clearable

  size="small"

  prefix-icon="el-icon-search"

  style="margin-bottom: 20px"

/>

<el-tree

  ref="tree"

  :data="filteredTreeOptionslist"

  node-key="id"

  :props="defaultProps"

  highlight-current

  :filter-node-method="filterNode"

></el-tree>

代码解释：

• 使用`v-model`实现搜索框和树形数据之间的双向绑定。

• 通过`filter-node-method`属性调用自定义的过滤函数`filterNode`，实时过滤树节点。

（三）数据增删改操作与表单管理

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

以下是实现表单管理的代码示例：

html 复制代码

<el-dialog

  :title="title"

  :visible.sync="dialogFormVisible"

  width="600px"

  :close-on-click-modal="false"

  append-to-body

>

  <div class="container">

    <el-form

      ref="typeForm"

      :model="typeFrom"

      :rules="rules"

      label-width="100px"

    >

      <el-row>

        <el-col :span="20">

          <el-form-item label="目录名称：" prop="name">

            <el-input

              v-model="typeFrom.name"

              maxlength="20"

              placeholder="目录名称"

              style="width: 70%"

            />

          </el-form-item>

        </el-col>

      </el-row>

      <el-row>

        <el-col :span="20">

          <el-form-item label="标识符：" prop="code">

            <el-input

              v-model="typeFrom.code"

              placeholder="标识符"

              style="width: 70%"

              maxlength="20"

            />

          </el-form-item>

        </el-col>

      </el-row>

    </el-form>

  </div>

  <div slot="footer" class="dialog-footer">

    <el-button size="mini" @click="cancel">关 闭</el-button>

    <el-button type="primary" size="mini" @click="typeSubmitForm">

      确 定

    </el-button>

  </div>

</el-dialog>

代码解释：

• 使用`el-dialog`组件弹出表单对话框。

• 表单通过`el-form`和`el-form-item`进行布局，并设置校验规则。

• 提交表单时，根据数据的状态（新增或编辑）调用不同的 API 接口，更新树形数据。

（四）树形数据的深度复制与展开控制

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

以下是实现树形数据深度复制的代码示例：

javascript 复制代码

deepCopy(nodes, level) {

  return nodes.map(node => {

    const newNode = { ...node };

    if (level < 2) {

      newNode.expanded = true; // 默认展开前两层

    }

    if (node.children) {

      newNode.children = this.deepCopy(node.children, level + 1); // 递归复制子节点

    }

    return newNode;

  });

}

代码解释：

• `deepCopy`方法深度复制树形节点数据，确保每一层的节点状态独立。

• 默认展开前两层，提供更好的用户体验。

（五）表单校验与数据合法性

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

以下是实现表单校验的代码示例：

javascript 复制代码

rules: {

  name: [

    {

      required: true,

      message: "目录名称不能为空",

      trigger: "blur",

    },

  ],

  code: [

    {

      required: true,

      message: "标识符不能为空",

      trigger: "blur",

    },

  ],

  sortOrder: [

    {

      required: true,

      message: "请输入正整数",

      trigger: "blur",

    },

    {

      validator: this.validateIntegerInput,

      trigger: "blur",

    },

  ],

},

validateIntegerInput(rule, value, callback) {

  if (!/^[0-9]{1,4}$/.test(value)) {

    callback(new Error("请输入1到4位的正整数"));

  } else {

    callback();

  }

},

代码解释：

• `rules`定义了表单字段的校验规则，确保目录名称、标识符等字段不能为空。

• `validateIntegerInput`是一个自定义的校验函数，确保用户输入的是一个 1 到 4 位的正整数。

（六）提交表单并更新树形数据

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

以下是实现表单提交的代码示例：

javascript 复制代码

typeSubmitForm() {
  this.$refs.typeForm.validate(valid => {
    if (valid) {
      if (this.typeFrom.id != null) {
        updateRuleType(this.typeFrom).then(response => {
          this.$message.success("修改成功");
          this.dialogFormVisible = false;
          this.getTree();
          this.reset();
        });
      } else {
        addRuleType(this.typeFrom).then(response => {
          this.$message.success("新增成功");
          this.dialogFormVisible = false;
          this.getTree();
          this.reset();
        });
      }
    } else {
      return false;
    }
  });
}

代码解释：

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

三、总结

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