template
:show-close="false"是关闭默认的X号,slot="title"自定义一个X
@close是弹窗关闭会触发,@close='closeDialog’关闭之后清空验证
<!-- 按钮 -->
<el-row class="btn-list">
<el-button @click="dialogVisibleClick">新增</el-button>
</el-row>
<!-- 新增弹窗 -->
<el-dialog
title="提示"
:visible.sync="addDialogVisible"
width="30%"
:show-close="false"
class="dialog-add"
@close='closeDialog'
>
<div slot="title" class="dialog-top">
<span>新增</span>
<i class="el-icon-circle-close" @click="addDialogVisible = false"></i>
</div>
<!-- 主题 -->
<el-form :model="dialogData" :rules="rules" ref="dialogData" label-width="86px">
<el-form-item label="费用名称:" prop="name">
<el-input v-model="dialogData.name"></el-input>
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="收费标准:" prop="standard">
<el-input v-model="dialogData.standard"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="折后价格:" prop="price">
<el-input v-model="dialogData.price"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="说明:" prop="instructions">
<el-input type="textarea" v-model="dialogData.instructions"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="updataDialogData">确 定</el-button>
</el-form-item>
</el-form>
</el-dialog>
data数据
addDialogVisible: false, //弹窗是否显示
dialogData: { //表单数据
name: '',
standard: '',
price: '',
instructions: '',
},
rules: { // 表单验证
name: [{ required: true, message: '请输入费用名称', trigger: 'blur' }],
standard: [{ required: true, message: '请输入收费标准', trigger: 'blur' }],
price: [{ required: true, message: '请输入折后价格', trigger: 'blur' }],
instructions: [{ required: true, message: '请输入说明', trigger: 'blur' }],
}
methods
// 弹窗关闭事件,清空表单
closeDialog() {
this.$refs['dialogData'].resetFields()
},
//新增确定按钮点击,触发验证规则
updataDialogData() {
this.$refs['dialogData'].validate((valid, err) => {
if(!valid) return
this.addDialogDataUpdata() // 验证通过执行这个函数
})
},
addDialogDataUpdata() {
// 验证通过此处调用后台接口
this.addDialogVisible = false
},
//新增
dialogVisibleClick() {
this.addDialogVisible = true
},