前面了解了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:'',//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、信息折叠很好，对于字段很多的表的显示比较友好。比如：
<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(){}
})