element-plus怎么在MessageBox里面做一个提交表单,并用axios提交给后端,示例代码
时间: 2024-03-26 09:41:35 浏览: 110
可以参考下面的示例代码:
```vue
<template>
<div>
<el-button type="primary" @click="submitForm">提交</el-button>
</div>
</template>
<script>
import { MessageBox, Message } from 'element-plus'
import axios from 'axios'
export default {
data() {
return {
form: {
name: '',
age: '',
gender: ''
}
}
},
methods: {
submitForm() {
MessageBox({
title: '提交表单',
message: `
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
`,
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
dangerouslyUseHTMLString: true
}).then(() => {
axios.post('/api/submitData', this.form).then(res => {
Message.success('提交成功')
}).catch(err => {
Message.error('提交失败')
})
})
}
}
}
</script>
```
在上面的示例代码中,我们在`MessageBox`的`message`属性中嵌入了一个表单,这个表单中包含了三个字段:姓名、年龄、性别。当用户点击`MessageBox`的确认按钮时,我们就使用`axios`将表单数据提交到后端。如果提交成功,我们就显示一个成功的提示消息,否则就显示一个错误的提示消息。需要注意的是,由于我们在`MessageBox`的`message`属性中使用了HTML标记,因此需要将`dangerouslyUseHTMLString`属性设置为`true`,以确保这些标记不会被转义。
阅读全文