今日总结 2024-12-24

  1. 树组件基础应用 :element-ui 的 el-tree 组件用于层级结构信息展示,通过 data 绑定数据,利用 props 设置如 children(子节点字段名)、label(显示内容字段名 )等属性,还能使用 default-expand-all 控制默认展开状态,在组织架构组件 src/views/department/index.vue 中引入使用,并声明相关数据。

  2. 自定义树形结构 :往 el-tree 传入插槽内容实现自定义渲染,相关代码同样在 src/views/department/index.vue 中,涉及样式调整也在此文件。

  3. 数据获取 :在 src/api/department.js 封装获取组织架构数据的 API ,并于 src/views/department/index.vue 初始化组织架构时调用该方法。

  4. 递归转化树形结构 :分析数据关联关系(父级 id 为子级 pid)后,在 src/utils/index.js 封装递归函数将扁平数据转化为树形,获取到的数据在 src/views/department/index.vue 使用该方法转换。递归处理未知层级数据,要有跳出条件且自身调用自身时参数不能重复。

    javascript 复制代码
    export function transformToTree(data, pid = 0) {
      const result = [];
      data.forEach(item => {
        if (item.pid === pid) {
          const children = transformToTree(data, item.id);
          if (children.length > 0) {
            item.childNodes = children;
          }
          result.push(item);
        }
      });
      return result;
    }
  5. 添加子部门流程

    • 弹层组件 :从注册添加子部门事件开始,历经封装弹层组件、控制显示隐藏,涉及多处 src/views/department/index.vue 代码,还封装了 src/views/department/components/add-dept.vue 新增组件 ,利用 sync 修饰符监听子组件事件来修改父组件值,同时设置 el-tree 点击属性。
    • 表单结构与校验 :在 src/views/department/components/add-dept.vue 中搭建表单结构,分基本校验(必填、长度限制 )和业务校验(名称、编码不重复),按定义数据架构、绑定属性、定义规则步骤操作。
    • 获取负责人数据 :在 src/api/department.js 封装获取负责人 API,在 src/views/department/components/add-dept.vue 组件初始化调用,并用 select 渲染下拉选项。
    • 记录当前部门与确定取消操作 :点击添加子部门时,从父组件 src/views/department/index.vue 传递当前部门 id 给子组件 src/views/department/components/add-dept.vue,子组件接收;在 src/api/department.js 封装新增部门 API,子组件确定方法里校验通过后调用该 API ,通知父组件更新,取消方法重置表单并关闭弹层,父组件监听更新事件。

难点分析

  1. 递归转化树形结构:递归逻辑本身较抽象,理解函数如何不断调用自身去处理层级关系有难度,尤其是精准把握跳出条件设置,一旦出错容易造成死循环。解决办法是多画流程图,模拟数据流转过程,从简单层级数据开始测试递归函数。
  2. 表单业务校验:部门名称和编码与已有数据的重复校验,涉及异步请求获取已有数据,要在恰当的校验时机处理响应结果,确保校验的实时性与准确性,避免误判。可以提前梳理好校验流程,使用防抖或节流策略处理重复校验请求。
  3. 数据传递与组件交互 :父子组件间传递数据,像传递当前部门 id ,以及利用 sync 修饰符监听事件更新父组件值,需要深入理解 Vue 组件通信机制,否则容易出现数据更新不及时、通信中断等问题。仔细研读 Vue 官方文档关于组件通信部分,结合简单示例项目加深理解,调试时多打印关键数据观察传递情况。
相关推荐
01传说1 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
小李飞飞砖1 小时前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖1 小时前
React Native 状态管理方案全面对比
javascript·react native·react.js
sunbyte3 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录4 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子4 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神4 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao4 小时前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
_一两风4 小时前
JS执行机制-event loop
javascript
止观止4 小时前
JavaScript对象创建9大核心技术解析
开发语言·javascript·ecmascript