您当前的位置： 首页 >  前端

dawn

暂无认证

  • 6浏览

    0关注

    204博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

ElementUI(1)：很好的前端开发框架

dawn 发布时间：2022-01-07 12:29:58 ，浏览量：6

　　前面了解了EasyUI和LayUI，这两款前端开发框架很好，如果要论流行和热度显然不及ElementUI。

　　昨天晚上看了ElementUI，界面、功能、与Vue.js的配合的确是好，使得开发者更专注于界面设计和功能实现，其实，EasyUI和LayUI也应该可以的，为什么就没有这方面的开发案例呢？

　　实现了表格数据的修改和删除，增加也一样，按钮不好放就没有做，分页要连接数据库，暂时也没有做，后面再做，原理是相通的。

　　EasyUI和LayUI使用上都差不多，ElementUI有点别扭，但必须适应。

　　实现的界面：

　　计算机的配置信息多，为了在一个页面显示，集中起来，鼠标移动到详细信息字段上再显示，备注信息也是这样处理的，还可以处理图片，后面加二维码。

　　修改界面：

　　删除界面：

　　主页面computerList.html：




    
    
    
    
    
    
    
    Vue.js+Element-UI


    

        计算机设备列表

        


            
                
                    
                    
                        
                                
                                
                        
                    

                    {{scope.$index + 1 }}
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    

                    
                        
                            
                            
CPU: {{ scope.row.C05 }}

                            
内存大小: {{ scope.row.C06 }}

                            
硬盘大小: {{ scope.row.C07 }}

                            
主板: {{ scope.row.C08 }}

                            
显卡: {{ scope.row.C09 }}

                            
声卡: {{ scope.row.C10 }}

                            
MAC地址: {{ scope.row.C11 }}

                            

                                详细信息
                            

                            
                        
                    

                    
                    
                        
                        
{{ scope.row.C20 }}

                        

                            备注说明
                        

                        
                    
                    

                

                
                

            

        


        
                


                    

                        
                            


                                
                                    
                                
                
                            

                            


                                
                                    
                                    
                                    
                                    
                                    
                                    
                                
                
                            

                            


                                
                                    
                                  
                
                            

                        

                        
                            


                                
                                    
                                  
                        
                            

                            


                                
                                    
                                  
                        
                            

                            


                                
                                    
                                  
                        
                            

                        

                        
                            


                                
                                    
                                  
                        
                            

                            


                                
                                    
                                
                        
                            

                            


                                
                                    
                                
                        
                            

                        

                        
                            


                                
                                    
                                
                        
                            

                            


                                
                                    
                                
                        
                            

                            


                                
                                    
                                    
                                    
                                
                        
                            

                        

                        
                            


                                
                                    
                                
                        
                            

                            


                                
                                    
                                    
                                    
                                
                        
                            

                            

                                    
                                        
                                        
                                        
                                    
                            

                        

                        
                            


                                
                                    
                                
                        
                            

                            


                                
                                    
                                
                        
                            

                            


                                
                                    
                                    
                                    
                                    
                                    
                                    
                                
                        
                            

                        

                        
                            


                                
                                    
                                
                        
                            

                            


                                
                                    
                                
                
                            

                        

                    

                


                
                    取 消
                    确 定

 　　代码界面computerList.js：

var VueDataObj={
  dialogVisible:false,//修改信息窗口的显示
  editRecordIndex:0,//点击编辑后选中的行
  pagePara:{
      pageNum:1,
      pageSize:5,
  },
  recordCount:12,
  computerInfo:{
        C01:'',//资产编号
        C02:'',//资产类型
        C03:'',//设备出厂类型
        C04:'',//设备出厂编号
        C05:'',//CPU
        C06:'',//内存大小
        C07:'',//硬盘大小
        C08:'',//主板
        C09:'',//显卡
        C10:'',//声卡
        C11:'',//MAC地址
        C12:'',//生产日期
        C13:'',//生产商
        C14:'',//购置时间
        C15:'',//保修截止时间
        C16:'',//购置渠道
        C17:'',//价格
        C18:'',//资产状态
        C19:'',//简要说明
        C20:'',//财务资产编码
     },
     tableData:[]
};

var methods={
  delRecord(rowId){
    this.$confirm('是否确定删除该记录？')
    .then(_ => {
      this.tableData.splice(rowId,1);
    })
    .catch(_ => {});    
  },
  handleClose(){
    this.dialogVisible=false;
  },
  editRecord(row,selectRowIndex){
    // console.log(row);
    this.editRecordIndex=selectRowIndex;
    this.computerInfo={
      C01:row.C01,
      C02:row.C02,
      C03:row.C03,
      C04:row.C04,
      C05:row.C05,
      C06:row.C06,
      C07:row.C07,
      C08:row.C08,
      C09:row.C09,
      C10:row.C10,
      C11:row.C11,
      C12:row.C12,
      C13:row.C13,
      C14:row.C14,
      C15:row.C15,
      C16:row.C16,
      C17:row.C17,
      C18:row.C18,
      C19:row.C19,
      C20:row.C20, 
    };
    this.dialogVisible=true;
  },
  submitUpdate(){
    Vue.set(this.tableData,this.editRecordIndex,this.computerInfo);
    this.dialogVisible=false;
  },
  getAllRecord(){
    console.log("数组赋值");
    this.tableData=[{
      C01: 'YQCY-001-001-0001',
      C02: '台式机',
      C03: 'ThinkCenter M6500t-NO56',
      C04:'1234567890000000890',
      C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
      C06:'8',
      C07:'1000',
      C08:'',
      C09:'NVIDIA GeForce GT 730',
      C10:'Realtek High Definition Audio',
      C11:'1234-1234-1234',
      C12:'2018-12-31',
      C13:'联想',
      C14:'2019-12-31',
      C15:'2029-12-31',
      C16:'自购',
      C17:'9000',
      C18:'正常使用',
      C19:'这是一段简要的文字描述',
      C20:'101000024298',
    }, {
     C01: 'YQCY-001-001-0041',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'11111111123455555',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'DELL',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    }, {
     C01: 'YQCY-001-001-0501',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'1234567890111122225',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'IBM',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    }, {
      C01: 'YQCY-001-001-0033',
      C02: '台式机',
      C03: 'ThinkCenter M6500t-NO56',
      C04:'12345678901234567890',
      C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
      C06:'8',
      C07:'1000',
      C08:'',
      C09:'NVIDIA GeForce GT 730',
      C10:'Realtek High Definition Audio',
      C11:'1234-1234-1234',
      C12:'2018-12-31',
      C13:'HUAWEI',
      C14:'2019-12-31',
      C15:'2029-12-31',
      C16:'自购',
      C17:'9000',
      C18:'正常使用',
      C19:'这是一段简要的文字描述',
      C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0021',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'服务器',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '笔记本',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '台式机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '笔记本',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    },{
     C01: 'YQCY-001-001-0001',
     C02: '一体机',
     C03: 'ThinkCenter M6500t-NO56',
     C04:'12345678901234567890',
     C05:'Intel(R) Core(TM) i7-4790 @3.60GHz',
     C06:'8',
     C07:'1000',
     C08:'',
     C09:'NVIDIA GeForce GT 730',
     C10:'Realtek High Definition Audio',
     C11:'1234-1234-1234',
     C12:'2018-12-31',
     C13:'HUAWEI',
     C14:'2019-12-31',
     C15:'2029-12-31',
     C16:'自购',
     C17:'9000',
     C18:'正常使用',
     C19:'这是一段简要的文字描述',
     C20:'101000024298',
    }];

  }
};

var computed={};

var watch={};

var vm=new Vue({
    el:'#app',
    data:VueDataObj,
    methods,
    computed,
    watch,
    created:function(){
      this.getAllRecord();
    }
})

　　样式文件computerList.css：

#app {
    width:100%;
    margin:0 auto;
    text-align: center;
}

.el-table td, .el-table th {
    text-align: center;
} 
.el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 220px;
}

　　说明：

　　1、ElementUI参考页面地址：Element - The world's most popular Vue UI framework

　　2、ElementUI专注界面设计，数据处理可以使用Vue.js来处理。

　　3、信息折叠很好，对于字段很多的表的显示比较友好。比如：

                    
                        
                            
                            
CPU: {{ scope.row.C05 }}

                            
内存大小: {{ scope.row.C06 }}

                            
硬盘大小: {{ scope.row.C07 }}

                            
主板: {{ scope.row.C08 }}

                            
显卡: {{ scope.row.C09 }}

                            
声卡: {{ scope.row.C10 }}

                            
MAC地址: {{ scope.row.C11 }}

                            

                                详细信息

　　它将计算机的配置信息集中展示，可以信息的任意处理和组合，而且还可以是动态的。

　　4、表头字段的居中和背景颜色可以通过设置样式来实现：

　　5、一般标签居中的样式为（设置为块元素）：

style="text-align: center;display:block;"

　　6、Vue.js代码太长，我是分开写：

//定义数据
var VueDataObj={};
//定义方法
var methods={};
//定义计算属性
var computed={};
//定义监视
var watch={};
//定义Vue
var vm=new Vue({
    el:'#app',
    data:VueDataObj,
    methods,
    computed,
    watch,
    created:function(){}
})
关注
打赏
1664252102
查看更多评论

最近更新

热门博客

[ 申请 ]友情链接：

ClashX教程 绘画宝宝 配音宝宝
立即登录/注册

微信扫码登录

0.0483s