el-dialog自定义样式 清除表单 自定义表单验证

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
    },