Vue——Elementui案例实现

需求分析:

Vue——Elementui案例实现_第1张图片

Vue——Elementui案例实现_第2张图片

对于上面要仿照的页面先新建一个页面组件EmpView.vue组件在views文件夹下

Vue——Elementui案例实现_第3张图片

基本页面布局

 对于上面页面的布局其实在Element当中也可以找到相应可以实现的组件,Vue——Elementui案例实现_第4张图片 成功找到一个符合要求的布局,直接复制粘贴到项目里面

Vue——Elementui案例实现_第5张图片

Vue——Elementui案例实现_第6张图片

此时页面相应的位置已经有了对应的占位单词。 

Vue——Elementui案例实现_第7张图片基本布局实现代码:





每次处理一个区域,处理时去官网看看有没有适合的具体实现,有就搬过来,没有也搬过来自己改改就合适了,至于样式部分就自己看着加。 

效果图如图所示

Vue——Elementui案例实现_第8张图片

页面组件实现 

会抄会改也是一门技术。

实现效果:

Vue——Elementui案例实现_第9张图片

代码:





axios异步加载数据并渲染展示

Vue——Elementui案例实现_第10张图片

要想使用axios要先安装axios

用到一个叫做插槽slot的东西 

可以获取到prop的属性,scope.row获取到的是一整行数据

Vue——Elementui案例实现_第11张图片

Vue——Elementui案例实现_第12张图片  

使用axios发送请求获取数据然后赋值给当前的数据模型用于页面数据渲染

Vue——Elementui案例实现_第13张图片

效果图

Vue——Elementui案例实现_第14张图片

最终代码:





小结: 

先从全局入手,完成全局布局,然后完成各个组件,最后实现数据渲染。

扩展:路由配置

引入路由之后,点击左侧菜单栏之后,浏览器地址栏会发生变化,然后路由会自动更新显示与url对应的组件。 

Vue——Elementui案例实现_第15张图片

Vue官方提供的路由当中。

在VueRouter维护了一份路由表,路由表当中记录了url的哈希片段和组件之间的对应关系。

作用:根据路由请求在路由视图中更新展示组件。

在router-link中指定访问哪一个组件,需要指定组件对应的标识。

通过router-view可以在任何区域展示与url对应的组件,想在哪里展示只需要在对应位置加上.

Vue——Elementui案例实现_第16张图片 

使用方式 

Vue——Elementui案例实现_第17张图片

 

Vue——Elementui案例实现_第18张图片

 

 

你可能感兴趣的:(Vue,vue.js,前端,javascript)