前言：工作中用到 vue+element ui 的前端框架，动态添加 Tab，删除 Tab，切换 Tab 时提示用户是否切换等，发现 element ui  有一个 bug，这里记录一下如何实现。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9523735.html

网站地址：我的个人vue+element ui demo网站

github地址：yuleGH github

代码如下： 

<html>

<head>

    <title>测试</title>

    <!-- 引入样式 -->

    <link rel="stylesheet" href="../lib/elementui/theme-chalk/index.css" type="text/css">

</head>

<body>

<div id="app">

  <p style="color: red;">自定义增加标签页触发器，切换标签页时提示是否切换</p>

  <div style="margin-bottom: 20px;">

    <el-button size="small"  @click="addTab(editableTabsValue)">

      add tab

    </el-button>

  </div>

  <el-tabs v-model="editableTabsValue" type="card" closable

    @tab-remove="removeTab"

    :before-leave="beforeLeaveTab">

    <el-tab-pane

      v-for="(item, index) in editableTabs"

      :key="item.id"

      :label="'Tab' + (index + 1)"

      :name="item.id">

      {{item.content}}

    </el-tab-pane>

  </el-tabs>

</div>

<!-- 引入组件库 -->

<script type="text/javascript" src="../lib/vue.js"></script>

<script type="text/javascript" src="../lib/elementui/index.js"></script>

<script type="text/javascript">

    new Vue({

        el: "#app",

        data: {

          editableTabsValue : '1',

          editableTabs: [{

            id: '1',

            content: 'Tab 1 content'

          }, {

            id: '2',

            content: 'Tab 2 content'

          }],

          tabIndex : 2,

          isTip : true

        },

        methods: {

          addTab(targetId) {

            let newTabId = ++this.tabIndex + '';

            this.editableTabs.push({

              id: newTabId,

              content: 'New Tab content'

            });

            this.isTip = false;

            this.editableTabsValue = newTabId;

          },

          removeTab(targetId) {

            let tabs = this.editableTabs;

            let activeId = this.editableTabsValue;

            if (activeId === targetId) {

              tabs.forEach((tab, index) => {

                if (tab.id === targetId) {

                  let nextTab = tabs[index + 1] || tabs[index - 1];

                  if (nextTab) {

                    activeId = nextTab.id;

                  }

                  this.isTip = false;

                  this.editableTabsValue = activeId;

                }

              });

            }

            this.editableTabs = tabs.filter(tab => tab.id !== targetId);

          },

          beforeLeaveTab(){

            if(!this.isTip){

              this.isTip = true;

              return true;

            }

            return this.$confirm('此操作将切换tab页, 是否继续?', '提示', {

              confirmButtonText: '确定',

              cancelButtonText: '取消',

              type: 'warning'

            }).then(() => {

              this.$message({

                type: 'success',

                message: '切换成功！可以做一些其他的事情'

              });

            }).catch(() => {

              this.$message({

                type: 'success',

                message: '取消成功！可以做一些其他的事情'

              });

              throw new Error("取消成功！");

            });

          }

        }

    });

</script>

</body>

</html>

完。

　　

发现一个bug

　　在使用 el-tabs 的属性 before-leave 时可以返回 Promise 来控制是否切换，如下：

　　于是，我直接返回了 $confirm 方法返回的 Promise，

        return this.$confirm('此操作将切换tab页, 是否继续?', '提示', {

              confirmButtonText: '确定',

              cancelButtonText: '取消',

              type: 'warning'

            }).then(() => {

              this.$message({

                type: 'success',

                message: '切换成功！可以做一些其他的事情'

              });

            });

　　可是当点击弹出框取消时页面报错如下：

　　点击上方查看源码，发现源码如下：

　　所以，发现 vue minui 封装的 promise 定义了 reject，而这里没有加取消处理，而且我们的 this.$confirm 也没有加取消方法，所以自己加上取消方法传过去就好了。

　　但是只是在 this.$confirm 加取消方法，仅仅能做到不报错而已，并不能做到用户点击取消时阻止切换。

解决方案

　　element ui 源码中加上如下代码 ,function(){}：

　　并在使用时这样使用：

          beforeLeaveTab(){

            return this.$confirm('此操作将切换tab页, 是否继续?', '提示', {

              confirmButtonText: '确定',

              cancelButtonText: '取消',

              type: 'warning'

            }).then(() => {

              this.$message({

                type: 'success',

                message: '切换成功！可以做一些其他的事情'

              });

            }).catch(() => {

              this.$message({

                type: 'success',

                message: '取消成功！可以做一些其他的事情'

              });

              throw new Error("取消成功！");

            });

          }

转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9523735.html

vue+element ui 的tab 动态增减，切换时提示用户是否切换的更多相关文章

  1. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  2. 基于vue(element ui) + ssm + shiro 的权限框架

    zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

  3. 分享一个自搭的框架，使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  4. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  5. vue + element ui 表格自定义表头，提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  6. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  7. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  8. 基于 vue+element ui 的cdn网站（多页面，都是各种demo）

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  9. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

随机推荐

  1. C++实现文件自校验的一种方法

    #include <iostream> #include <stdio.h> extern long FileSizeof(char *); int main() { if(F ...

  2. Xcode的多种Build Configuration

    一: 建多个Configuration的目的. 多套域名打包. 1 开发时的域名. 2 内测时的域名. 3 公测时的域名. 4 企业版的域名. 5 APP Store的域名. 通过注释的方式,容易出错 ...

  3. MySQL(慢日志记录)

    day63 参考:https://www.cnblogs.com/wupeiqi/articles/5716963.html

  4. elasticsearch 分片(Shards)的理解

    分片重要性 Es中所有数据均衡的存储在集群中各个节点的分片中,会影响ES的性能.安全和稳定性, 所以很有必要了解一下它. 分片是什么? 简单来讲就是咱们在ES中所有数据的文件块,也是数据的最小单元块, ...

  5. 【GDKOI2016】 魔卡少女 线段树

    题目大意:给你一个长度为n的序列${a_1....a_n}$,有$m$次操作 每次操作有两种情况:修改$a_i$的值,询问$[l,r]$中所有子区间的异或和. 数据范围:$n,m≤10^5$,$a_i ...

  6. JavaScript函数理解

    本文参考自简书javaScript之函数详解 这里从函数的构造函数开始. 在js中,函数都是对象,它们都是Function构造函数的实例.因此,类似Java中的对象,函数名可以理解为指向该Functi ...

  7. Java—关于String的分析

    一.两种赋值方式的比较 1.直接赋值法:String s1="abc"; 这种赋值方法用的最多,因为它可能不需要创建对象,或者只创建一次. 它首先会判断字符串常量池有没有存在字符串 ...

  8. asp.net MVC 多系统目录结构

    学习了几天的mvc5,发现vs把所有的控制器都放在同一个目录Controllers目录下,细想一下,假如一个项目包含几个系统: 行政办公系统.培训管理系统.督办管理系统.会议管理系统…… 如果还把控制 ...

  9. Java并发编程笔记之LongAdder和LongAccumulator源码探究

    一.LongAdder原理 LongAdder类是JDK1.8新增的一个原子性操作类.AtomicLong通过CAS算法提供了非阻塞的原子性操作,相比受用阻塞算法的同步器来说性能已经很好了,但是JDK ...

  10. 转：Java8内存模型—永久代(PermGen)和元空间(Metaspace)

    一.JVM 内存模型 根据 JVM 规范,JVM 内存共分为虚拟机栈.堆.方法区.程序计数器.本地方法栈五个部分. 1.虚拟机栈:每个线程有一个私有的栈,随着线程的创建而创建.栈里面存着的是一种叫“栈 ...