el-tabs选项卡切换时判断是否切换

~犇犇~

已于 2022-05-07 11:35:59 修改

阅读量2.2k

点赞数 1

文章标签： elementui vue.js javascript

于 2022-05-07 11:35:06 首次发布

本文链接：https://blog.csdn.net/qq_29124867/article/details/124627283

版权

1、给el-tabs加click事件和离开属性before-leave

<el-tabs v-model="activeName"  @tab-click="handleTabClick" :before-leave="beforeLeave"></el-tabs>

2、记录离开之前的tab值

data(){
  return {
     activeName:'1',
     oldActiveName:''
  }
} 

beforeLeave(activeName,oldActiveName){
   //activeName点击切换的tab值
   //oldActiveName离开的tab值
  this.oldActiveName=oldActiveName

 },

3、切换事件

//其中this.getAllList(); this.getselectList();这两个方法用到了this.activeName值，该值作为参数传给后台

handleTabClick(val){
   if(this.total!==this.dataListRight.length){
        this.$confirm(`您有未保存数据项, 是否确认离开?`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
               this.activeName=val.name
               this.getAllList();
               this.getselectList();
            }).catch(() => {
              this.activeName=this.oldActiveName 
         });
      }
      else{
          this.getAllList();
          this.getselectList();
      }
    },