vue3+elementPlus：el-drawer新增修改弹窗复用

在el-drawer的属性里设置:title属性，和重置函数

//html<!-- 弹窗  --><el-drawerv-model="drawer":title="title":size="505":direction="direction":before-close="handleClose"><el-formlabel-position="top":inline="true"ref="ruleFormRef"size="default":model="form.queryParams"class="RuleForm":rules="rules":label-position="labelPosition"status-icon><el-form-item label="型号" prop="bearingModel"><el-inputv-model="form.queryParams.bearingModel"placeholder="请添加型号"controls-position="right"/></el-form-item><el-form-item label="供应商名称" prop="factoryName"><el-selectv-model="form.queryParams.factoryName"placeholder="请选择供应商名称"clearable><el-optionv-for="item in Code.bearingData":key="item.id":label="item.factoryName":value="item.factoryName"@click="changeSelect(item)"/></el-select></el-form-item><el-form-item label="接触角" prop="contactAngle"><el-input-numberv-model="form.queryParams.contactAngle":step="1":min="0"placeholder="请添加接触角"controls-position="right"/></el-form-item>......</el-form><el-form-item><el-buttonv-if="title == '新增轴承信息'"type="primary"@click="onRuleSubmit">创建</el-button><el-button v-else type="primary" @click="onRuleSave">保存</el-button><el-button type="primary" plain @click="onRuleReset(ruleFormRef)">重置</el-button></el-form-item></el-drawer>//dataconst title = ref("")//弹窗标题//js
//新增按钮
const onForm = () => {reset() // 重置表单drawer.value = truetitle.value = "新增轴承信息"  // 标题为“新增”
}
//新增 保存按钮
const onRuleSubmit = () => {const objAdd = {bearingModel: form.queryParams.bearingModel,factoryID: selectData.value.id,factoryName: selectData.value.factoryName,contactAngle: Math.floor(form.queryParams.contactAngle),};ruleFormRef.value.validate((valid) => {if (valid) {BearingAdd(objAdd).then((res) => {if (res.status === 200) {ElNotification({title: '提示',message: '新增成功',type: 'success',})getBearingList()ruleFormRef.value.resetFields()drawer.value = false}})} else {ElNotification({title: '提示',message: '提交字段内容错误！！！',type: 'warning',})return false}})
}
//详情 编辑按钮
const onRuleForm = (row) => {drawer.value = true;title.value = "编辑轴承信息" // 标题为“编辑”BearingDetail({id: row.id,}).then((res) => {if (res.status === 200) {drawer.value = true;form.queryParams = res.data.data;}});
};
//编辑 保存按钮
const onRuleSave = (val) => {const objSave = {id: form.queryParams.id,bearingModel: form.queryParams.bearingModel,factoryID: selectData.value.id,factoryName: selectData.value.factoryName,contactAngle: Math.floor(form.queryParams.contactAngle),};ruleFormRef.value.validate((valid) => {if (valid) {BearingEdit(objSave).then((res) => {if (res.status === 200) {ElNotification({title: "提示",message: "修改成功",type: "success",});drawer.value = false;getBearingList();}});} else {ElNotification({title: "提示",message: "提交字段内容错误！！！",type: "warning",});return false;}});
};//表单重置 
const reset = () => {form.queryParams = {bearingModel: undefined,factoryID: undefined,factoryName: undefined,contactAngle: undefined,};
}

上一篇文章，

uniapp踩坑之项目：使用过滤器将时间格式化为特定格式_uniapp过滤器-CSDN博客文章浏览阅读446次。uniapp踩坑之项目：使用过滤器将时间格式化为特定格式，利用filters过滤器对数据直接进行格式化，注意：与method、onLoad、data同层级_uniapp过滤器https://blog.csdn.net/weixin_43928112/article/details/134807024