elementui点击确认之后添加确认框

要求:新增数据点击确认之后需要做一个确认框,点击确认以后才能提交数据。

用到了element-ui的控件:地址https://element.eleme.cn/#/zh-CN/component/message-box

 效果图:

// 确定按钮操作
			submitForm() {
				this.$refs['form'].validate(valid => {
					if (this.wrnId) {
						this.form.wrnId = this.wrnId;
					}
					this.$confirm('是否确认添加?', '提示', {
						c
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
elementUI的this.$confirm方法不支持直接添加多选。根据提供的代码和引用中的示例,可以看到在确认对话的内容部分,使用了h函数创建了一组p标签,但是并没有提供多选选项。引用中的示例也没有展示如何在确认对话添加多选。 如果您需要在elementUI确认对话添加多选,您可以考虑自定义对话组件,然后使用elementUI的Dialog组件来实现。在自定义对话组件中,您可以根据需要添加多选,并在确认按钮点击时获取多选选项值进行处理。 以下是一个示例代码,展示如何自定义对话组件并添加多选: ```vue <template> <el-dialog :visible.sync="dialogVisible" title="提示" @close="handleClose"> <div> <el-checkbox-group v-model="checkedOptions"> <el-checkbox label="选项1"></el-checkbox> <el-checkbox label="选项2"></el-checkbox> <el-checkbox label="选项3"></el-checkbox> </el-checkbox-group> </div> <span slot="footer" class="dialog-footer"> <el-button @click="cancel">取消</el-button> <el-button type="primary" @click="confirm">确定</el-button> </span> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, checkedOptions: [] }; }, methods: { handleClose() { // 对话关闭时的逻辑 }, cancel() { // 取消按钮点击时的逻辑 this.dialogVisible = false; }, confirm() { // 确定按钮点击时的逻辑,处理多选选项值 console.log(this.checkedOptions); this.dialogVisible = false; } } }; </script> ``` 通过自定义对话组件,您可以根据需要自由地添加多选以及其他表单元素,并在确认按钮点击时获取选项值进行处理。请根据您的实际需求进行修改和调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值