本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766
这篇文章主要介绍一个用户管理页面的列表展示，数据搜索，查询，增删改的实现，当然这些都是静态的，后面会介绍结合后台实现真正的数据交互。页面中间部分主要分为3部分，分别是顶部的搜索，中间的列表，底部的分页，我们先出布局说起
（一）新建用户页面
User.vue
<template><divclass="mainDiv">//布局内容依次写在这里</div></template><style>.mainDiv{min-height:700px;margin:30px;background-color:#fff;box-shadow:05px20pxrgba(220,222,231,.65);padding:30px;}</style><script>exportdefault{data(){return{}}}</script>（二）页面布局（html部分）
1.加入页面标题
<el-row><spanclass="title-text"><iclass="fafa-userfa-fw"></i>用户管理</span><el-divider></el-divider></el-row>
2.加入搜索form,用来查询，过滤数据，还有查询，重置，添加按钮
<el-row><el-col><el-form:inline="true"ref="filtersForm":model="filtersForm"><el-form-item><el-inputv-model="filtersForm.name"placeholder="姓名"style="width:200px;"/></el-form-item><el-form-item><el-inputv-model="filtersForm.code"placeholder="编号"style="width:200px;"/></el-form-item><el-form-itemlabel="起止时间"><el-col:span="11"><el-date-pickertype="date"placeholder="选择开始日期"v-model="filtersForm.dateStart"style="width:100%;"></el-date-picker></el-col><el-colclass="line":span="2"style="text-align:center;">-</el-col><el-col:span="11"><el-date-pickertype="date"placeholder="选择结束日期"v-model="filtersForm.dateEnd"style="width:100%;"></el-date-picker></el-col></el-form-item><el-form-item><el-buttontype="blue"@click="handleQuery"icon="el-icon-search">查询</el-button></el-form-item><el-form-item><el-buttontype="success"@click="handleReset"icon="el-icon-refresh">重置</el-button></el-form-item><el-form-item><el-buttontype="primary"@click="handleAdd"icon="el-icon-circle-plus-outline">添加</el-button></el-form-item></el-form></el-col></el-row>
3.表格布局，显示日期，姓名，编号，电话，邮箱，操作
<el-table:data="tableData"style="width:100%"><el-table-columnlabel="日期"align="center"><templateslot-scope="scope"><iclass="el-icon-time"></i><spanstyle="margin-left:10px">{{scope.row.date}}</span></template></el-table-column><el-table-columnlabel="姓名"align="center"><templateslot-scope="scope"><el-popovertrigger="hover"placement="top"><p>姓名:{{scope.row.name}}</p><p>住址:{{scope.row.address}}</p><divslot="reference"class="name-wrapper"><el-tagsize="medium">{{scope.row.name}}</el-tag></div></el-popover></template></el-table-column><el-table-columnlabel="编号"align="center"><templateslot-scope="scope"><iclass="el-icon-star-off"></i><spanstyle="margin-left:10px">{{scope.row.code}}</span></template></el-table-column><el-table-columnlabel="电话"align="center"><templateslot-scope="scope"><iclass="el-icon-mobile-phone"></i><spanstyle="margin-left:10px">{{scope.row.phone}}</span></template></el-table-column><el-table-columnlabel="邮件"align="center"><templateslot-scope="scope"><iclass="el-icon-message"></i><spanstyle="margin-left:10px">{{scope.row.email}}</span></template></el-table-column><el-table-columnlabel="操作"align="center"><templateslot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index,scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index,scope.row)">删除</el-button></template></el-table-column></el-table>
4.加入分页按钮
<el-paginationbackgroundlayout="prev,pager,next,jumper,->,total,slot"@current-change="handleCurrentChange":page-size="10"total="15"style="float:right;margin-top:10px;"></el-pagination>
5.加入用户添加框，注意这是隐藏的，只有点击添加按钮才会显示出来
<el-dialogtitle="添加用户":visible.sync="formVisibleAdd":close-on-click-modal="false"top="30vh"width="55%"@close="closeDialogAdd"><el-form:model="addUserForm":rules="rules"ref="addUserForm"><el-col:span="12"><el-form-itemlabel="用户姓名":label-width="formLabelWidth"prop="name"><el-inputv-model="addUserForm.name"></el-input></el-form-item></el-col><el-col:span="12"><el-form-itemlabel="出生日期":label-width="formLabelWidth"prop="birthDate"><el-date-pickertype="date"placeholder="选择出生日期"v-model="addUserForm.birthDate"style="width:100%;"></el-date-picker></el-form-item></el-col><el-col:span="12"><el-form-itemlabel="用户编号":label-width="formLabelWidth"prop="code"><el-inputv-model="addUserForm.code"></el-input></el-form-item></el-col><el-col:span="12"><el-form-itemlabel="用户电话":label-width="formLabelWidth"prop="phone"><el-inputv-model="addUserForm.phone"></el-input></el-form-item></el-col><el-col:span="12"><el-form-itemlabel="用户邮箱":label-width="formLabelWidth"prop="email"><el-inputv-model="addUserForm.email"></el-input></el-form-item></el-col><el-col:span="12"><el-form-itemlabel="详细住址":label-width="formLabelWidth"prop="address"><el-inputv-model="addUserForm.address"></el-input></el-form-item></el-col></el-form><divslot="footer"class="dialog-footer"><el-buttontype="info"@click="closeDialogAdd">取消</el-button><el-buttontype="success"@click="handleSubmitAdd":loading="formLoading">确定</el-button></div></el-dialog>
6.加入用户修改框，注意这是隐藏的，只有点击修改按钮才会显示出来
<el-dialogtitle="修改用户":visible.sync="formVisibleUpdate":close-on-click-modal="false"top="30vh"width="55%"@close="closeDialogUpdate"><el-form:model="updateUserForm":rules="rules"ref="updateUserForm"><el-col:span="12"><el-form-itemlabel="用户姓名":label-width="formLabelWidth"prop="name"><el-inputv-model="updateUserForm.name"></el-input></el-form-item></el-col><el-col:span="12"><el-form-itemlabel="出生日期":label-width="formLabelWidth"prop="birthDate"><el-date-pickertype="date"placeholder="选择出生日期"v-model="updateUserForm.birthDate"style="width:100%;"></el-date-picker></el-form-item></el-col><el-col:span="12"><el-form-itemlabel="用户编号":label-width="formLabelWidth"prop="code"><el-inputv-model="updateUserForm.code"></el-input></el-form-item></el-col><el-col:span="12"><el-form-itemlabel="用户电话":label-width="formLabelWidth"prop="phone"><el-inputv-model="updateUserForm.phone"></el-input></el-form-item></el-col><el-col:span="12"><el-form-itemlabel="用户邮箱":label-width="formLabelWidth"prop="email"><el-inputv-model="updateUserForm.email"></el-input></el-form-item></el-col><el-col:span="12"><el-form-itemlabel="详细住址":label-width="formLabelWidth"prop="address"><el-inputv-model="updateUserForm.address"></el-input></el-form-item></el-col></el-form><divslot="footer"class="dialog-footer"><el-buttontype="info"@click="closeDialogUpdate">取消</el-button><el-buttontype="success"@click="handleSubmitUpdate":loading="formLoading">确定</el-button></div></el-dialog>（三）js实现
1.初始化数据，方法
exportdefault{data(){return{tableData:[{birthDate:'2016-05-02',name:'王小虎',address:'上海市普陀区金沙江路1518弄',code:'1001001',phone:'18566547896',email:'test@126.com'},{birthDate:'2016-05-04',name:'王小虎',address:'上海市普陀区金沙江路1517弄',code:'1001001',phone:'18566547896',email:'test@126.com'},{birthDate:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路1519弄',code:'1001001',phone:'18566547896',email:'test@126.com'},{birthDate:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路1516弄',code:'1001001',phone:'18566547896',email:'test@126.com'},{birthDate:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路1516弄',code:'1001001',phone:'18566547896',email:'test@126.com'},{birthDate:'2016-05-03',name:'王小虎',address:'上海市普陀区金沙江路1516弄',code:'1001001',phone:'18566547896',email:'test@126.com'},{birthDate:'2016-05-01',name:'王小虎',address:'上海市普陀区金沙江路1519弄',code:'1001001',phone:'18566547896',email:'test@126.com'}],filtersForm:{name:'',code:'',dateStart:'',dateEnd:''},addUserForm:{birthDate:'',name:'',address:'',code:'',phone:'',email:''},updateUserForm:{birthDate:'',name:'',address:'',code:'',phone:'',email:''},formVisibleAdd:false,formVisibleUpdate:false,formLoading:false,formLabelWidth:'100px',rules:rules}},methods:{handleUpdate,handleDelete,handleQuery,handleReset,handleAdd,handleCurrentChange,closeDialogAdd,closeDialogUpdate,handleSubmitAdd,handleSubmitUpdate}}
2.初始化form表单验证规则
//form验证规则construles={name:[{required:true,message:'请输入用户姓名',trigger:'blur'}],code:[{required:true,message:'请输入用户编号',trigger:'blur'}],birthDate:[{required:true,message:'请选择出生日期',trigger:'blur'}],phone:[{required:true,message:'请输入电话号码',trigger:'blur'}],email:[{required:true,message:'请输入邮箱地址',trigger:'blur'}],address:[{required:true,message:'请输入详细住址',trigger:'blur'}],}
3.初始化方法，包括添加修改删除，查询，重置，等等
//点击查询lethandleQuery=function(){//TODOajax}//点击重置lethandleReset=function(){this.filtersForm={}}//点击添加按钮lethandleAdd=function(){this.addUserForm={}this.formVisibleAdd=true}//点击修改按钮lethandleUpdate=function(index,row){this.updateUserForm=Object.assign({},row)this.formVisibleUpdate=true}//点击删除按钮lethandleDelete=function(index,row){if(this.pageLoading)returnthis.$confirm('此操作将永久删除该数据,是否继续?','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}).then(()=>{this.pageLoading=true//TODOajaxthis.$message({message:"删除用户成功",type:'success'});this.pageLoading=false}).catch(e=>{})}//点击翻页lethandleCurrentChange=function(val){//TODO翻页}//关闭对话框时的操作（添加）letcloseDialogAdd=function(){this.formVisibleAdd=false;this.$refs.addUserForm.resetFields()}//关闭对话框时的操作（修改）letcloseDialogUpdate=function(){this.formVisibleUpdate=false;this.$refs.updateUserForm.resetFields()}//点击添加提交按钮lethandleSubmitAdd=function(){if(this.formLoading){return}this.$refs.addUserForm.validate(valid=>{if(!valid){return}this.formLoading=truethis.formVisibleAdd=false//TODOajaxthis.$message({message:"添加用户成功",type:'success'});this.formLoading=false})}//点击修改提交按钮lethandleSubmitUpdate=function(){if(this.formLoading){return}this.$refs.updateUserForm.validate(valid=>{if(!valid){return}this.formLoading=truethis.formVisibleUpdate=false//TODOajaxthis.$message({message:"修改用户成功",type:'success'});this.formLoading=false})}
说明到此这个页面的静态部分就完成了，后面的文章会结合后台，通过axios来实现数据的增删改查
上一篇：SpringBootVueElement入门实战（七）Echart集成下一篇：SpringBootVueElement入门实战（九）router路由配置点击这里返回目录
程序人生，更多分享请关注公众号
源代码下载
关注上面公众号，回复源码即可获取gitbug/gitee下载地址
