el-select框，切换选项时弹出提示框_element slider 怎么在切换之前 提示

需求：如图，状态选择框切换选项时，弹出提示框；点击确定，发送请求更改状态；点击取消，选择框显示原来选项。

思路：由于element-ui的el-select选择后只能添加change事件，但是change事件一旦触发，选择框中的值已经改变。正常的方法是监听select中的v-model绑定的值（定义一个初始值，）。如下代码：

<template>
  <div class="approvalStage">
    <el-select v-model="storeLocation" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-dialog
      :visible.sync="changeStoreVisible"
      class="taskDialog delete-shortcut-dialog"
      width="420px"
      :modal="false"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <template slot="title">
        <span style="font-size:16px;font-weight:400;">
          <i
            class="iconfont icon-warning"
            style="font-size:20px;color:rgba(23,155,255,1);margin-right:5px;"
          ></i>是否改变选项值
        </span>
      </template>
      <p class="tips-text" style="height: 38px;">
        <span style="color:red;font-size:14px;">改变选项值，</span>是否继续?
      </p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeStoreCancle">取 消</el-button>
        <el-button type="primary" @click="changeStoreForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      storeLocation: '初始值',
      changeStoreVisible: false,
      beforeStorageValue: '', // 中介值
      afterStorageValue: ''
    }
  },
  watch: {
    storeLocation: {
      immediate: true,
      handler(val, old) {
        console.log('val:', val, 'old:', old)
        if (this.beforeStorageValue) {
          console.log(
            'val:',
            val,
            'old:',
            old,
            'this.beforeStorageValue',
            this.beforeStorageValue
          )
          if (val !== this.beforeStorageValue) {
            this.changeStoreVisible = true
          }
        }
      }
    }
  },
  mounted() {
    this.beforeStorageValue = this.storeLocation
  },
  methods: {
    changeStoreCancle() {
      this.storeLocation = this.beforeStorageValue
      this.changeStoreVisible = false
    },
    changeStoreForm() {
      console.log(this.storeLocation)
      this.beforeStorageValue = this.storeLocation // 确定更改后使中介值等于目前框内的值，这样下次确定改变取消的话，可以回到现在的值
      this.changeStoreVisible = false
    }
  }

}
</script>
<style lang="scss" scoped>
  .approvalStage{
    background-color: #fff;
    padding: 20px;
    padding-bottom: 40px;
    border-radius: 4px;
  }
</style>
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

此次项目里的选项是在表格内后台数据渲染而来，v-model无法设定一个初始值；但select提供了visible-change事件，官方文档描述：下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false；利用此事件在点击下拉框，出现下拉框时把原来现实的值储存（baseValue）。



select框值改变时提示框：