web前端布局--使用element中的Container布局容器

 

一、vue项目创建逻辑

以创建员工管理页面为例，

1）项目入口是main.js

2)main.js中引入根组件App.vue 

3)根组件中，引入自定义的组件。 

4）修改完善自定义的组件。

 

访问后的效果。 

 

二、自定义组件

以员工管理系统为例，前端页面，跟Qt中一样，都需要先设置布局，然后再在各布局中添加显示的内容。

Element网站布局容器：https://element.eleme.cn/#/zh-CN/componet/container

1.拷贝element 网站中的布局元素，添加布局标签：在vue项目中的自定义组件（在view文件中创建自定义组件例如，DeptView.vue）将element相应的布局容器代码layout，粘贴到在DeptView.vue组件中的<template></template>标签的中的<div></div>标签内。

如上图所示，主要分为三大布局。 

 

找到想要的布局，粘贴代码。 

 

2.在layout标签中，添加相应的内容标签。

1）引入左侧导航栏

 

2）引入行内表单 

 

 

 3）添加表格组件

 

 

 

目前页面中还没有数据，以下将通过使用axios从后端引入数据，

 

下载完成后，在node_modules中可以查看。 

 

 

自定义的后端数据： 

 

上图中，性别和图片还未正常显示：

处理方法：

通过插槽解决，插槽可以获取表格中的一行数据。

 

 

如果表格的宽度有问题，可以自行调整。 

 

4)添加分页组件

 

最终效果：