Java Web学习笔记28——Element案例

案例：

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

服务端数据获取地址，也就是API接口。

这个URL返回的是JSON格式的数据。

表格就是把JSON格式的数据渲染显示在页面中。

页面分为三个部分:

页头：

菜单栏：

主展示区域：

思路：从全局到细节去推进。

步骤：

1）创建页面，完成页面的整体布局规划；

2）布局中各个部分的组件实现；

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

说明：前两步，参考Element的官网的样子，复制粘贴即可。

通过布局容器：

然后我们根据Elements网站中的实例代码，复制粘贴，调整。 

最后得到如下的页面：

增加行内表单：

然后，我们可以得到这样的效果。

然后我们实现列表数据的异步加载，并渲染展示：

    
        
            Tlias智能学习辅助系统
            
                
                    
                        
                            信息系统管理
                            部门管理
                            员工管理
                        
                    
                
                
                    
                    
                        
                            
                        
                        
                            
                                
                                
                            
                        
                        
                            
                            
                            
                        
                        
                            查询
                        
                    

                    
                    
                        
                        
                            
                                
                            
                        
                        
                            
                                {{ scope.row.gender == '1' ? '男' : '女' }}
                            
                        
                        
                        
                        
                        
                            编辑
                            删除