Element-案例-脚本页面布局

案例需求：

根据页面原型完成员工管理页面开发，并通过Axios完成数据异步加载

 步骤

• 创建页面，完成页面的总体布局规划
• 布局中各个组件的实现
• 列表数据的异步加载，并渲染展示

1.创建页面，完成页面的总体布局规划

分析案例中的展示实例可以知道该页面的布局为header、aside、main三部分构成：在Element官网中的Container 布局容器中可找到对应的布局格式，将将代码复制即可。具体关键代码如下:

具体的运行结果为：

 ps：在上述代码中不太清楚标签中type属性值所代表的具体含义

2.布局中各个组件的实现

对于组件的实现，我们首先要明确案例中的都是声明类型的组件，确定好组件的类型之后，在Element中去选择我们需要的样式即可。

注意：

Vue要求所有在模板中使用的属性或方法必须在组件实例的 data 选项中进行声明或初始化。即模块中使用的属性和方法都需要在数据模型中进行设置，否则页面无法成功加载。

具体关键代码如下：（代码中的注释具有一定的参考价值）

运行结果如下：

 3.列表数据的异步加载，并渲染展示

异步加载的实现需要通过Axios实现，在Vue项目中安装Axios：npm install axios

 安装完成之后，在需要使用Axios的页面中引入Axios

 思考在什么时候需要发送异步请求？

只需要在Vue当中的勾子方法中来发送请求，如此，只要vue对象一创建挂载完成就会发送异步请求，加载数据，然后将加载得到的数据赋值给tableDAta对象就可以渲染展现出来了

最后具体关键代码如下：（由于教学中提供的url地址失效，所以数据暂未填充）

最终的运行结果为：

 最重要的自己动手做