当前位置:   article > 正文

el-select 选中后二次确认弹窗~_el-select切换前二次确认

el-select切换前二次确认

1.需求:在el-select下拉选择的时候,当我们更换选项时需要弹出二次确认弹窗。

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

3.代码:

  1. <el-select v-model="tab_id" placeholder="请选择" @change="tabidChange">
  2. <el-option v-for="item in tabList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
  3. </el-select>
  4. watch: {
  5. tab_id(val,oldval){
  6. console.log(val,oldval,"监听");
  7. this.oldval = oldval
  8. }
  9. },
  10. tabidChange(val){
  11. let tab_titel = this.tabList.find((res)=>{
  12. return res.id == val
  13. })
  14. this.$confirm(`确认将「${tab_titel.title}」频道页面设置成得到首页?`, "警告", {
  15. confirmButtonText: "确定",
  16. cancelButtonText: "取消",
  17. type: "warning",
  18. })
  19. .then(() => {
  20. this.$message({
  21. type: "success",
  22. message: "设置成功!",
  23. });
  24. })
  25. .catch(() => {
  26. this.$message({
  27. type: "error",
  28. message: "已取消设置",
  29. });
  30. //将监听到的旧值赋给点击的值
  31. this.tab_id = this.oldval;
  32. });
  33. },

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/104886
推荐阅读