el-select 选中后二次确认弹窗～_el-select选择时弹出

实现思路：利用el-select中change事件，通过watch监听数据变换，定义一个初始状态，当点击弹窗中确认时设置成功，点击取消时，将将监听到的旧值赋给点击的值。
1.页面

<el-form-item
                    label="质检细项"
                    prop="grade_id"
                    :label-width="formLabelWidth"
                    v-if="!pass"
                  >
                    <el-select
                      v-model="editTaskForm.grade_id"
                      filterable
                      clearable
                      placeholder="请选择"
                      @change="chooseGradeConf"
                    >
                      <el-option
                        v-for="(item,index) in gradeConfsByType"
                        :key="index"
                        :label="item.grade_name"
                        :value="Number(item.grade_id)"
                      />
                    </el-select>
                  </el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.监听钩子

watch: {
      grade_id(val,oldval){
        console.log(val,oldval,"监听");
        this.oldval = oldval
      }
    },
1
2
3
4
5
6

3.change事件

chooseGradeConf(val){
        this.$confirm(`选择质检细项会更改模板描述内容，确认更选质检细项吗?`, "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "选择成功!",
            });
            if (this.gradeConfsByType != null){
              for (let i=0;i<this.gradeConfsByType.length;i++){
                if (this.editTaskForm.grade_id===this.gradeConfsByType[i].grade_id){
                  this.editTaskForm.grade_desc = this.gradeConfsByType[i].grade_desc
                  selectGradeTemplate({
                    grade_id : this.editTaskForm.grade_id,
                  }).then(res=>{
                    this.gradeTemplateByGradeId = res
                    if (this.gradeTemplateByGradeId!==null){
                      this.editTaskForm.grade_template_id = this.gradeTemplateByGradeId[0].grade_template_id
                      this.editTaskForm.grade_template_desc = this.gradeTemplateByGradeId[0].grade_template_desc
                    }else {
                      this.gradeTemplateByGradeId.push({grade_template_id:-1,grade_template_name:'无',grade_template_desc:''})
                      this.editTaskForm.grade_template_id = -1;
                    }
                  })
                }
              }
            }
          })
          .catch(() => {
            this.$message({
              type: "error",
              message: "已取消选择",
            });
            //将监听到的旧值赋给点击的值
            this.editTaskForm.grade_id=this.oldval
          });
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40