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

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

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

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

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

　　实现的界面：

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

　　修改界面：

　　删除界面：

　　主页面computerList.html：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><link rel="stylesheet" href="./CSS/computerList.css"><!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> --><title>Vue.js+Element-UI</title>
</head>
</body><div id="app"><h1>计算机设备列表</h1><div class="dataList"><template><el-table :data="tableData" border style="width: 100%" :header-cell-style="{ textAlign: 'center', backgroundColor: '#f9f9f9' }"><!-- <el-table-column prop="" type="index" label="序号" width="50"></el-table-column> --><el-table-column prop="" label="操作" width="120" style="text-align: center;display:block;"><template slot-scope="scope"><el-button type="primary" icon="el-icon-edit" @click="editRecord(scope.row,scope.$index)" circle></el-button><el-button type="danger" icon="el-icon-delete" @click="delRecord(scope.$index)" circle></el-button></template></el-table-column><el-table-column prop="" label="序号" width="50"><template slot-scope="scope">{{scope.$index + 1 }}</template></el-table-column><el-table-column prop="C01" label="资产编号" width="160"></el-table-column><el-table-column prop="C02" label="资产类型" width="80"></el-table-column><el-table-column prop="C03" label="设备出厂类型" width="220"></el-table-column><el-table-column prop="C04" label="设备出厂编号" width="200"></el-table-column><el-table-column prop="C12" label="生产日期" width="100"></el-table-column><el-table-column prop="C13" label="生产商" width="80"></el-table-column><el-table-column prop="C14" label="购置时间" width="100"></el-table-column><el-table-column prop="C15" label="保修截止时间" width="120"></el-table-column><el-table-column prop="C16" label="购置渠道" width="100"></el-table-column><el-table-column prop="C17" label="价格" width="80"></el-table-column><el-table-column prop="C18" label="资产状态" width="80"></el-table-column><el-table-column prop="C20" label="财务资产编码" width="150"></el-table-column><el-table-column label="配置参数" width="100"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>CPU: {{ scope.row.C05 }}</p><p>内存大小: {{ scope.row.C06 }}</p><p>硬盘大小: {{ scope.row.C07 }}</p><p>主板: {{ scope.row.C08 }}</p><p>显卡: {{ scope.row.C09 }}</p><p>声卡: {{ scope.row.C10 }}</p><p>MAC地址: {{ scope.row.C11 }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">详细信息</el-tag></div></el-popover></template></el-table-column><el-table-column label="简要说明" width="100"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>{{ scope.row.C20 }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">备注说明</el-tag></div></el-popover></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pagePara.pageNum":page-sizes="[5, 10, 15, 20]":page-size="pagePara.page-size"layout="total, sizes, prev, pager, next, jumper":total="recordCount"></el-pagination></template></div><el-dialog title="修改信息" :visible.sync="dialogVisible" width="60%" :before-close="handleClose"><div><el-form ref="form" :model="computerInfo" label-width="80px"><el-row :gutter="20"><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="资产编号"><el-input v-model="computerInfo.C01"></el-input></el-form-item></div></el-col><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="资产类型"><el-select v-model="computerInfo.C02" placeholder="请选择资产类型"><el-option label="台式机" value="台式机"></el-option><el-option label="一体机" value="一体机"></el-option><el-option label="笔记本" value="笔记本"></el-option><el-option label="服务器" value="服务器"></el-option></el-select></el-form-item></div></el-col><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="出厂类型"><el-input v-model="computerInfo.C03"></el-input></el-form-item>  </div></el-col></el-row><el-row :gutter="20"><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="出厂编号"><el-input v-model="computerInfo.C04"></el-input></el-form-item>  </div></el-col><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="CPU"><el-input v-model="computerInfo.C05"></el-input></el-form-item>  </div></el-col><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="内存大小"><el-input v-model="computerInfo.C06"></el-input></el-form-item>  </div></el-col></el-row><el-row :gutter="20"><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="硬盘大小"><el-input v-model="computerInfo.C07"></el-input></el-form-item>  </div></el-col><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="主板"><el-input v-model="computerInfo.C08"></el-input></el-form-item></div></el-col><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="显卡"><el-input v-model="computerInfo.C09"></el-input></el-form-item></div></el-col></el-row><el-row :gutter="20"><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="声卡"><el-input v-model="computerInfo.C10"></el-input></el-form-item></div></el-col><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="MAC地址"><el-input v-model="computerInfo.C11"></el-input></el-form-item></div></el-col><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="生产日期"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="computerInfo.C12" style="width: 200px;"></el-date-picker></el-col></el-form-item></div></el-col></el-row><el-row :gutter="20"><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="生产商"><el-input v-model="computerInfo.C13"></el-input></el-form-item></div></el-col><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="购置时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="computerInfo.C14" style="width: 200px;"></el-date-picker></el-col></el-form-item></div></el-col><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="保修时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="computerInfo.C15" style="width: 200px;"></el-date-picker></el-col></el-form-item></div></el-col></el-row><el-row :gutter="20"><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="购置渠道"><el-input v-model="computerInfo.C16"></el-input></el-form-item></div></el-col><el-col :span="6"><div class="grid-content bg-purple"><el-form-item label="价格"><el-input v-model="computerInfo.C17"></el-input></el-form-item></div></el-col><el-col :span="10"><div class="grid-content bg-purple"><el-form-item label="资产状态"><el-checkbox-group v-model="computerInfo.C18"><el-checkbox label="正常使用" name="C18"></el-checkbox><el-checkbox label="维修" name="C18"></el-checkbox><el-checkbox label="库存" name="C18"></el-checkbox><el-checkbox label="报废" name="C18"></el-checkbox></el-checkbox-group></el-form-item></div></el-col></el-row><el-row :gutter="20"><el-col :span="8"><div class="grid-content bg-purple"><el-form-item label="财务编码"><el-input v-model="computerInfo.C20"></el-input></el-form-item></div></el-col><el-col :span="16"><div class="grid-content bg-purple"><el-form-item label="备注"><el-input v-model="computerInfo.C19"></el-input></el-form-item></div></el-col></el-row></el-form></div><span slot="footer" class="dialog-footer" style="text-align: center;display:block;"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="submitUpdate()">确 定</el-button></span></el-dialog></div><!-- 引入组件库 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>    <script src="https://unpkg.com/element-ui/lib/index.js"></script>    <script src="./JavaScript/computerList.js"></script></body>
</html>

　　代码界面computerList.js：

var VueDataObj={dialogVisible:false,//修改信息窗口的显示editRecordIndex:0,//点击编辑后选中的行pagePara:{pageNum:1,pageSize:5,},recordCount:12,computerInfo:{C01:'',//资产编号C02:'',//资产类型C03:'',//设备出厂类型C04:'',//设备出厂编号C05:'',//CPUC06:'',//内存大小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、信息折叠很好，对于字段很多的表的显示比较友好。比如：

                    <el-table-column label="配置参数" width="100"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>CPU: {{ scope.row.C05 }}</p><p>内存大小: {{ scope.row.C06 }}</p><p>硬盘大小: {{ scope.row.C07 }}</p><p>主板: {{ scope.row.C08 }}</p><p>显卡: {{ scope.row.C09 }}</p><p>声卡: {{ scope.row.C10 }}</p><p>MAC地址: {{ scope.row.C11 }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">详细信息</el-tag></div></el-popover></template></el-table-column>

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

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

<el-table :data="tableData" border style="width: 100%" :header-cell-style="{ textAlign: 'center', backgroundColor: '#f9f9f9' }">

　　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(){}
})

ElementUI(1)：很好的前端开发框架相关推荐

从零开始搭建vue+element-ui的前端开发框架
最近需要进行下前端开发,特此记录下前端开发框架搭建过程 1 安装node.js 官网下载安装即可官网地址:http://nodejs.cn/download/ 2 安装webpack 在命令行里面输 ...
必须去收藏14个响应式布局的前端开发框架
必须去收藏14个响应式布局的前端开发框架前端开发并不是一个容易的工作,不仅需要掌握HTML.CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站.如今随着响应式 ...
最实用前端开发框架对比评测
现在,各种开发框架层出不穷,但是,真正的精品却为数不多.今天我们根据Github上的流行程度整理了2014年最受欢迎的5个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架. 1 ...
Skeljs – 用于构建响应式网站的前端开发框架
skelJS 是一个轻量级的前端框架,用于构建响应式站点和应用程序.让设计人员和开发人员可能够使用四个强大的组件:CSS 网格系统,响应式处理程序,CSS 的快捷方式和插件系统. 您可能感兴趣的相关文 ...
目前最流行的前端开发框架
作为前端开发者,各种框架的层出不穷,促使我们要不断学习才能防止落后,但是我们不可能做到每个框架都有学习的时间,我们只需要掌握流行的,坑少的即可.从以下三个方面了解目前流行的前端开发框架. 一.跨多平台 ...
好程序员web前端干货之web前端开发框架汇总
好程序员web前端干货之web前端开发框架汇总,其实一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合,我们可以在设计中使用它们.前端开发框架有很多,其中有一些写得 ...
常用的Web前端开发框架有哪些呢？分享这11个
在Web前端开发中,适时地使用一些框架,对于我们日常的开发,可以说是事半功倍.那么,常用的Web前端框架有哪些呢?本文,小千带你了解一下. Web前端框架节约了大量的开发成本和时间,因此很多企业会选择 ...
好用的Web前端开发框架有哪些呢？推荐这9款
对于一个程序员来学选择一款好用的开发工具可以大大提高工作效率,底层前端框架领域中早先jquery称霸.近年MVVM类型的框架成为主流,Vue.React和Angular三大框架较为常见.今天小千就介绍 ...
十大前端开发框架（转）
原文出处http://blog.jobbole.com/41950/ 编者按:考虑到英文原文的长度以及可读性,十大前端开发框架将分成上下两部分呈现给大家.上半部分着重讲的是Bootstrap家族框架, ...
推荐十四款常见的Web前端开发框架
在做web开发的时候经常会遇到一个问题,那就是,选择什么样的框架来做前端开发.下面封程中把目前常用的一些前端的框架简单的给大家介绍一下. 1. Bootstrap Boostrap绝对是目前最流行用得 ...

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

ElementUI(1)：很好的前端开发框架相关推荐

最新文章

热门文章