在el-drawer的属性里设置:title属性，和重置函数
javascript
//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,
};
}上一篇文章，