HRS--人力资源系统（Springboot+vue）--打基础升级--（三）查询用户信息

快来打我* 2023-10-14 23:13 71阅读 0赞

> 接上一集已经写了好导航侧界面，现在写个导航侧功能中的查询用户信息

![a5513a9a8d4744619c662b0c3e602e91.png][]

1. 首先写一个员工信息vue，嗯 就叫employee.vue

2. 特地预留了右边的空白位置是用来展示数据的，所以我们要做子目录的一个关联，其次记得做地址的路由

![b503da80dda24a8a86ee71a220885701.png][]3. Vue 安装axios，封装request

npm i axios -S 安装成功

![b3925b489cf243648fb85cbdee70c1f1.png][]

简单的封装了下，更详细的可以网上搜搜：

![78d6f942daaf4b3689338ccb260a0803.png][]

> **问题大bug：**<el-table-column>突然在页面上显示不出来，组件加载都是正常的，也import了，查了N多资料才知道。

查询发现是 "element-ui":版本高了，改成低版本些就可以正常展示，如2.9.2版本

![927c69bb886f4e87814b36af6bd42533.png][]

4 看界面展示结果图：

![2cdf7efa1e2e44d7a464e8aa8105280b.png][]

有2个样式问题：一个是最上面的请输入查询工号这一行应该靠左的，一个是操作没有数据的情况下不应该显示这2个按钮

5 查询用户信息界面最终展示效果

![388d2306041e43ad86e457dc5f9bb230.png][]

[a5513a9a8d4744619c662b0c3e602e91.png]: https://img-blog.csdnimg.cn/a5513a9a8d4744619c662b0c3e602e91.png
[b503da80dda24a8a86ee71a220885701.png]: https://img-blog.csdnimg.cn/b503da80dda24a8a86ee71a220885701.png
[b3925b489cf243648fb85cbdee70c1f1.png]: https://img-blog.csdnimg.cn/b3925b489cf243648fb85cbdee70c1f1.png
[78d6f942daaf4b3689338ccb260a0803.png]: https://img-blog.csdnimg.cn/78d6f942daaf4b3689338ccb260a0803.png
[927c69bb886f4e87814b36af6bd42533.png]: https://img-blog.csdnimg.cn/927c69bb886f4e87814b36af6bd42533.png
[2cdf7efa1e2e44d7a464e8aa8105280b.png]: https://img-blog.csdnimg.cn/2cdf7efa1e2e44d7a464e8aa8105280b.png
[388d2306041e43ad86e457dc5f9bb230.png]: https://img-blog.csdnimg.cn/388d2306041e43ad86e457dc5f9bb230.png