Vue中el-dialog的用法
1、写入页面<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogFormVisible"@closed="handleClose"><el-form :m
·
写入HTML
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item :label="title + '原因'" prop="reason">
<el-input
v-model="form.reason"
:placeholder="'请输入' + title + '原因'"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
写入变量
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 表单参数
form: {},
// 表单校验
rules: {
reason: [
{ required: true, message: "参数名称不能为空", trigger: "blur" }
],
},
写入方法
// 表单重置
reset() {
this.resetForm("form");
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
//提交保存
}
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
更多推荐
已为社区贡献2条内容
所有评论(0)