需求

select下拉选择框有一个默认选中的初始值，当我们切换选择的值时，弹出提示框，弹框包含取消和继续按钮，提示信息为：改变选择的值XXXXX，是否继续？

点击继续 选中的值改变

点击取消 则保持之前选中的值不变

代码

大体思路就是要保存一份前一次选中的值，切换值后，弹出提示框，当确认时，发送请求改变数据，否则，将值赋为之前选中的那个值。

<template>
  <div>
    <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
          }
        }
      }
    }
  },
  methods: {
    changeStoreCancle() {
      this.storeLocation = this.beforeStorageValue
      this.changeStoreVisible = false
    },
    changeStoreForm() {
      this.changeStoreVisible = false
    }
  },
  mounted() {
    this.beforeStorageValue = this.storeLocation
  }
}
</script>