需求

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>