人事管理项目-员工资料模块前端实现

简介: 人事管理项目-员工资料模块前端实现

Element

前端数据的展示使用Element中的表格来实现。在components目录下创建emp文件夹,然后在emp文件夹下创建EmpBasic.vue用来展示前端数据。注意,这里之所以将页面放在emp目录下,是为了配合16.5节提到的菜单数据格式化(在数据格式化时,设置员工资料相关的页面都放在emp目录下)。

EmpBasic.vue核心代码如下:

代码解释:

• 首先在data中定义emps用来存放所有员工的JSON数据,然后定义keywords用来存放查询的关键字。

• 在加载该页面时,在mounted中调用loadEmps初始化员工数据。

另外注意,表格中的日期使用formatDate过滤器实现日期的格式化,formatDate是一个全局过滤器。

formatDate过滤器定义如下:

经过以上几步配置后,读者就可以看到如图

员工资料中的基本资料一项,接口设计规则为“/employee/basic/**”,这是为了和数据库保持一致,防止没有权限的用户拿到请求接口后直接去请求数据。

相关文章
|
14天前
|
前端开发 JavaScript
前端项目公共组件封装思想
该文介绍了如何封装通用组件,如表单搜索、表格展示和分页器。首先,通过抽离出公共部分,创建`TableContainer`组件,利用具名插槽插入`navbar`和`table`,并通过props传递标题。然后在父组件中使用具名插槽和子组件实现具体功能。文中还展示了更复杂的组件封装示例,通过props实现数据双向绑定,以`el-pagination`为例,利用`sync`修饰符和`computed`属性监听并更新父组件状态,实现分页功能。文章最后提到了内容来源于哪。
|
8天前
|
前端开发 JavaScript
前端综合练手小项目
前端综合练手小项目
|
19天前
|
前端开发 JavaScript
【前端面试】this的指向_不爱吃糖的程序媛夏天,web前端面试项目中的问题包括
【前端面试】this的指向_不爱吃糖的程序媛夏天,web前端面试项目中的问题包括
|
19天前
|
JavaScript 前端开发 IDE
TypeScript在前端项目的渐进式采用策略
该文介绍了渐进式采用TypeScript在前端项目中的策略。首先,通过将JS文件扩展名改为TS并添加类型注解,如在`utils.js`中添加类型。接着,配置`tsconfig.json`,包括目标版本、模块系统、输出目录等。高级配置涉及路径别名、JSON导入、库文件等。然后,集成TypeScript到构建流程,如Webpack,安装`ts-loader`并调整配置。利用类型定义,包括安装第三方库的类型定义包,自定义类型定义或使用社区定义。最后,逐步迁移其他模块至TypeScript,强化类型检查,并确保IDE支持。
18 0
|
19天前
|
前端开发 JavaScript Java
《浅谈架构之路:前后端分离模式》 - 山人行 - 博客园,前端开发新手项目
《浅谈架构之路:前后端分离模式》 - 山人行 - 博客园,前端开发新手项目
|
19天前
|
前端开发 JavaScript Java
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
|
20天前
|
JSON JavaScript 前端开发
web前端 第一阶段面试题,2024年最新Web前端面试项目经验
web前端 第一阶段面试题,2024年最新Web前端面试项目经验
|
2天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
12 2
|
19天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
22天前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
46 1