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

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

//html
 
  
    
      
        
      
      
        
          
        
      
      
        
      
      
   ......
   
    
    
      创建
      保存
      重置
    
  


//data
 const title = ref("")//弹窗标题

//js
//新增按钮
const onForm = () => {
  reset() // 重置表单
  drawer.value = true
  title.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