vue3+elementPlus：el-drawer新增修改弹窗复用-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3+elementPlus：el-drawer新增修改弹窗复用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

//html
 <!-- 弹窗  -->
  <el-drawer
    v-model="drawer"
    :title="title"
    :size="505"
    :direction="direction"
    :before-close="handleClose"
  >
    <el-form
      label-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-input
          v-model="form.queryParams.bearingModel"
          placeholder="请添加型号"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="供应商名称" prop="factoryName">
        <el-select
          v-model="form.queryParams.factoryName"
          placeholder="请选择供应商名称"
          clearable
        >
          <el-option
            v-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-number
          v-model="form.queryParams.contactAngle"
          :step="1"
          :min="0"
          placeholder="请添加接触角"
          controls-position="right"
        />
      </el-form-item>
      
   ......
   
    </el-form>
    <el-form-item>
      <el-button
        v-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>


//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文章来源地址https://www.toymoban.com/news/detail-770471.html

到了这里，关于vue3+elementPlus：el-drawer新增修改弹窗复用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！