vue-element 对话框的使用？

弹出表单处理，很常见的场景。

一些简单的业务需求，可以直接通过对话框来完成。

直接看效果！

看实现代码，首先要有对话框的内容部分。

   <el-dialog title="延迟审核" :visible.sync="dialogDelayFormVisible">
      <el-form style="width:450px">
        <el-form-item label="申请理由:">
          {{ delayInfo.delay_apply_reason }}
        </el-form-item>

        <el-form-item label="原定完成时间:">
          {{ delayInfo.pre_finish_time }}
        </el-form-item>

        <el-form-item label="申请完成时间:">
          {{ delayInfo.delay_pre_finish_time }}
        </el-form-item>

        <el-form-item label="是否通过:">
          <el-radio-group v-model="delayInfo.type">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="回复内容:" v-if=" delayInfo.type == 2 ">
              <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10 }" v-model="delayInfo.delay_check_result"></el-input>
        </el-form-item>
      </el-form>
      

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDelayFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDelayConfirm">确 定</el-button>
      </div>
    </el-dialog>  

然后需要基础数据，

dialogDelayFormVisible: false,
delayInfo: {
        id: undefined,
        type:1,
        pre_finish_time:'',
        delay_pre_finish_time:'',
        delay_apply_reason:'',
        delay_check_result:'',
}

初始化数据，

handleDelay(row) {
      this.dialogDelayFormVisible = true;
      this.delayInfo.id = row.id;
      this.delayInfo.delay_pre_finish_time = row.delay_pre_finish_time;
      this.delayInfo.pre_finish_time = row.pre_finish_time;
      this.delayInfo.delay_apply_reason = row.delay_apply_reason;

      // 重置数据
      this.delayInfo.type = 1;
      this.delayInfo.delay_check_result = '';
}

提交表单，

handleDelayConfirm() {
      console.log('confirm');
      if (this.delayInfo.type == 2) {
        if (this.delayInfo.delay_check_result == '') {
          this.$message.warning("请填写原因");
          return;
        }
      }

      let _this = this;
      checkDelayApply({ id: _this.delayInfo.id , type: _this.delayInfo.type , delay_check_result : _this.delayInfo.delay_check_result }).then(() => {
          this.getStreetAssignList();
          this.dialogDelayFormVisible = false;
          this.$message.success("操作成功");
      });
}

基本的思路就是，先画出对话框。当点击事件时，将对话框展示出来。进行一些表单操作。当点击确认的时候，将表单数据传到后台。处理完成之后，再将对话框关闭，同时页面从新获取最新的数据。非常的灵活，非常的方便。