[vue.js]Element-UI组件tabs阻止切换使用

最新推荐文章于 2025-03-20 22:11:09 发布

zhuang0911

最新推荐文章于 2025-03-20 22:11:09 发布

阅读量621

点赞数 8

文章标签： vue.js ui 前端

本文链接：https://blog.csdn.net/zhuang0911/article/details/144819979

版权

阻止切换并提示

参考官方文档使用https://element.eleme.cn/2.11/#/zh-CN/component/tabs

功能

实现多个tab页按需放开及阻止切换;如果tab页有编辑标识，则提示是否确认切换

代码

<template>
  <div>
    <el-tabs tab-position="left"  v-model="activeName" type="border-card" :before-leave="handleChange">
      <el-tab-pane v-for="(item, index) in list" :label="item.name" :name="index.toString()" :key="index">
        <template #label>
          <span>
            <i :class="item.hasRecord ? 'el-icon-circle-check check-icon' : 'el-icon-time'"/>
            <span>{{ item.name }}</span>
            <span v-if="item.hasEdit">*</span>
          </span>
        </template>
        <div class="tabs_container">
          <component :is="item.components"></component>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
methods: {
handleChange(activeName, oldActiveName) {
      // 是否编辑为保存
      let changeRecord = false
   
      this.list.map((item, index) => {
        if(index.toString() === oldActiveName){
          changeRecord = item.hasEdit
        }
      })
      if(['0', '1'].includes(activeName)){
        return changeRecord ? this.showConfirm(oldActiveName) : true
      }else {
        if(hasPreRecord){
            return changeRecord ? this.showConfirm(oldActiveName) : true
          }
        }else{
          return false
        }
      }
    },
showConfirm(oldActiveName){
      let p = new Promise((resolve, reject)=>{
        this.list.map((item, index) => {
        if(index.toString() === oldActiveName && item.hasEdit){
          this.$confirm('当前页存在未保存的数据，是否确认离开?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              item.hasEdit = false
              resolve()
            }).catch(()=>{
              return reject()
            })
        }
      })
      })
      return p
    },
}
</script>