vue-element 对话框的使用?


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

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

直接看效果!

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

   
      
        
          {{ delayInfo.delay_apply_reason }}
        

        
          {{ delayInfo.pre_finish_time }}
        

        
          {{ delayInfo.delay_pre_finish_time }}
        

        
          
            
            
          
        

        
              
        
      
      

      
      

然后需要基础数据,

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("操作成功");
      });
}

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

相关