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

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

//html  ...... 创建保存重置//data const 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