兰州网站建设模板下载,局域网网站建设软件,国内 上市网站建设公司,表情包制作在线生成器一#xff1a;页面布局介绍#xff1a;
这是我刚刚用基于vue3element-plus写好的一个部门管理的页面 基本的增删改查已经写好#xff0c;下面我只提供页面的template和style的代码#xff1a;
template
templateel-card classbox-card…一页面布局介绍
这是我刚刚用基于vue3element-plus写好的一个部门管理的页面 基本的增删改查已经写好下面我只提供页面的template和style的代码
template
templateel-card classbox-card!-- 部门管理的头部 --divh1 stylemargin-left: 20px;部门管理/h1/div!-- 部门管理的主体部分 --el-button typeprimary stylemargin-left: 20px; clickaddDeptDialog()el-iconCirclePlus //el-icon nbsp; 新增部门/el-button!-- 主体内容展示 --div classform-boxel-table :datadeptDate border stylewidth: 100%el-table-column propid label序号 width120 aligncenter/el-table-column propname label部门名称 width240 aligncenter/el-table-column propupdateTime label最后操作时间 width360 aligncenter/el-table-column label操作 aligncentertemplate #defaultscopeel-button typeprimary :iconEdit circle clickupdateDept(scope.row.id) /el-button typedanger :iconDelete circle clickdelDept(scope.row.id)//template/el-table-column/el-table/div
/el-card!-- dialog弹窗 --
el-dialog v-modeldialogForValue width450px :titledialogTitleel-form :modeldeptForm el-form-item label部门名称 :label-widthformLabelWidthel-input v-modeldeptForm.name autocompleteoff //el-form-item/el-formtemplate #footerspan classdialog-footerel-button clickdialogForValue false取消/el-buttonel-button typeprimary clicksave()确认/el-button/span/template/el-dialog
/template
style部分
style scoped
.box-card{height: 700px;
}.form-box{margin-top: 20px;
}
/style
二表单校验
通过测试我们发现在添加部门的时候我不在输入框里面输入内容也是可以成功添加部门数据的这显得就不太友好。 我直接点击确定近发现数据已经添加成功了这就有点不符合逻辑了。 开始表单校验 1定义表单校验规则 绑定到form表单2把规则绑定到form表单中3定义表单组件的引用4检验表单 定义表单校验实例 完整规则代码 //定义表单校验的规则 //FormRules 是element给我们提供的,可以给我们提示
const rules refFormRules({name:[{required:true,message:部门名称不能为空,trigger:blur},{min:1,max:10,message:部门名称必须 2 - 10位,trigger:blur}]
})
规则绑定到表单中 代码
el-dialog v-modeldialogForValue width450px :titledialogTitleel-form :modeldeptForm:rulesrules el-form-item label部门名称 :label-widthformLabelWidth propnameel-input v-modeldeptForm.name autocompleteoff //el-form-item/el-formtemplate #footerspan classdialog-footerel-button clickdialogForValue false取消/el-buttonel-button typeprimary clicksave()确认/el-button/span/template/el-dialog
看看效果 可以发现我们定义的校验规则已经生效了 但是规则虽然生效了我们还是可以提交表单数据。 我们因该在表单校验不通过的时候阻止表单提交。 定义表单组件的引用 代码
//定义表单组件的引用 FormInstance 表单实例 是element给我们提供的
const deptFormRef refFormInstance() 把这个表单组件的引用绑定到我们自己的表单中。 代码
!-- dialog弹窗 refformRef 为了获取这个表单 --
el-dialog v-modeldialogForValue width450px :titledialogTitleel-form :modeldeptForm:rulesrulesrefdeptFormRef el-form-item label部门名称 :label-widthformLabelWidth propnameel-input v-modeldeptForm.name autocompleteoff //el-form-item/el-formtemplate #footerspan classdialog-footerel-button clickdialogForValue false取消/el-buttonel-button typeprimary clicksave()确认/el-button/span/template/el-dialog
在添加dialog弹窗里面点击保存的时候我们因该先判断表单校验是否通过才能往下执行。 代码
//确认保存
const save async () {//先表单校验 await deptFormRef.value?.validate().catch(err {ElMessage.error(表单校验的失败)throw err //throw err //下面正常的代码就不会执行了回抛出异常})//正式向后端发送请求let result //判断是添加还是修改if(dialogTitle.value 新增部门){//添加的请求result await insertDeptApi(deptForm.value)}else{//修改的请求result await updateDeptApi(deptForm.value)}if(result.code){ElMessage.success(操作成功)}else{ElMessage.error(操作失败)}//关闭弹窗dialogForValue.value false//重新查询search()
}
测试
可以看到表单校验成功了 控制台报错 不想提示报错还有另一种方式 代码
//确认保存
const save async () {//先表单校验 await deptFormRef.value?.validate().catch(err {ElMessage.error(表单校验的失败)//throw err //throw err //下面正常的代码就不会执行了回抛出异常return new Promise(() {}) //不想抛错可以这样promise是待定状态也不会往下执行})//正式向后端发送请求let result //判断是添加还是修改if(dialogTitle.value 新增部门){//添加的请求result await insertDeptApi(deptForm.value)}else{//修改的请求result await updateDeptApi(deptForm.value)}if(result.code){ElMessage.success(操作成功)}else{ElMessage.error(操作失败)}//关闭弹窗dialogForValue.value false//重新查询search()
}
测试 三表单重置
上面我们的表单校验已经成功了但是我们会发现一个缺点就是表单校验失败的提示信息一直都在。
我先把错误信息显示出来之后然后关闭dialog弹窗接着我在打开dialog弹窗发现错误信息依然在。 定义表单重置的方法 form是一会调用方法传递过来的表单实例参数就是一个变量名。后面的 FormInstance和undefined就是一个泛型。 代码
//表单重置
const resetForm (form : FormInstance | undefined) {if(!form) returnform.resetFields()
}
在点击新增部门和修改部门的方法时调用重置表单的方法。 代码 el-button typeprimary stylemargin-left: 20px; clickaddDeptDialog();resetForm(deptFormRef)el-iconCirclePlus //el-icon nbsp; 新增部门/el-button 代码 el-table-column label操作 aligncentertemplate #defaultscopeel-button typeprimary :iconEdit circle clickupdateDept(scope.row.id);resetForm(deptFormRef) /el-button typedanger :iconDelete circle clickdelDept(scope.row.id)//template/el-table-column
测试 在测试一个错误的然后退出重新打开看效果。 成功
