2.elementplus中标签页操作2024-04-23

操作包括关闭所有、关闭其他、向右关闭、向左关闭

页面代码

 <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        @tab-remove="tabRemove"
        @tab-change="clickTab"
    >


      <el-tab-pane :closable="true" v-for="t in tab" :key="t.path" :name="t.path">
        <template #label>
          <!--添加鼠标右键打开下拉框，判断当前下拉框类型能否删除-->
          <el-dropdown trigger="contextmenu" ref="oneDown" :id="t.path" @click.right="closeDisabled(t.path)"
                       @visible-change="changeItem($event,t.path)">
            {{ t.name }}
            <el-icon class="el-icon--right">
              <arrow-down/>
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="close('all',t.path)">关闭全部</el-dropdown-item>
                <el-dropdown-item :disabled="other" @click="close('other',t.path)">关闭其他</el-dropdown-item>
                <el-dropdown-item :disabled="right" @click="close('right',t.path)">向右关闭</el-dropdown-item>
                <el-dropdown-item :disabled="left" @click="close('left',t.path)">向左关闭</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>

      </el-tab-pane>
    </el-tabs>

在标签页中添加删除和获取当前页面路径方法，删除在pinia获取数据，获取当前页面在tab-change会有回调参数获取值
let activeName = ref("")
function clickTab(tab) {
 activeName.value = tab
}

function tabRemove(tabName) {
 tabs.removeTables(tabName)
}

在下拉菜单中判断标签是否可以进行不同类型删除

let other = ref()
let left = ref()
let right = ref()

//删除标签页类型是否能使用判断
function closeDisabled(path) {
 //当前路径的下标
 let index = tab.value.findIndex(item => item.path === path)

 //当数组大于等于2可以删除其他所有的标签页
 other.value = !(tab.value.length >= 2)

 //当前下标在标签页的第一个或者大于第一个
 left.value = !(index >= 1)

 //当前下标不能超过标签页数量
 right.value = !(index + 1 < tab.value.length)
}

保持只有一个下拉菜单,在打开其他的页面将之前的删除掉

//dom属性
let oneDown = ref()

//保持只有一个下拉框
function changeItem(event, path) {
 if (!event) {
   return
 }

 //弹框的过程中将其他的关闭
 let other = oneDown.value.filter(item => item.id !== path)
 other.forEach(item => {
   item.handleClose()
 })
}

pinia中方法

import {defineStore} from "pinia";

//标签页store
export const useTables = defineStore('tables', {
   state: () => {
       return {
           tables: [],     //展示的标签页
           nowTab: ''      //当前指向标签页路径
       }
   },
   actions: {
       //增加标签页
       addTables(tab) {
           //向当前展示标签页推数据
           this.tables.push(tab)
       },

       // 删除标签页（路径始终指向前一个标签页，除非是第一个标签页就会指向第二个）
       removeTables(nowTab) {
           //原始数组下标
           const index = this.tables.findIndex(item => item.path === nowTab)
           //去除需要删除的标签页后
           const indexs = this.tables.filter(tab => tab.path !== nowTab)
           //必须存有一个标签页
           if (indexs.length >= 1) {
               this.tables = indexs
               if (this.tables.length > 0) {
                   //如果删除的标签页在当前，那么下个指向在新数组的当前位置
                   if (index === this.tables.length) {
                       this.nowTab = this.tables[this.tables.length - 1].path
                   } else {
                       //直接进行路径寻找
                       this.nowTab = this.tables[index].path
                   }
               }
           }

       },
       //关闭标签页类型
       close(type, path) {
           //第一次出现下标的地方
           const index = this.tables.findIndex(item => item.path === path)
           //删除所有标签页
           if (type === 'all') {
               this.tables = []
               //删除除当前页外的其他
           } else if (type === 'other') {
               this.tables = this.tables.filter(item => item.path === path)
               //删除右边所有标签页
           } else if (type === 'right') {
               this.tables.splice(index + 1)
               //删除左边所有标签页
           } else if (type === 'left') {
               this.tables.splice(0, index)
           }
       }
   },
   //持久化本地,防止页面刷新丢失
   //pinia-plugin-persistedstate插件
   persist: {
       key: 'tabs',
       storage: sessionStorage,
       paths: ['nowTab', 'tables']
   }
})

全部方法

let tabs = useTables();
//标签页展示
let tab = ref([])

//标签页路径
let activeName = ref("")
//标签页下拉类型
let other = ref()
let left = ref()
let right = ref()

/dom属性
let oneDown = ref()

//监听pinia中标签页和当前标签页路径的变化
watchEffect(() => {
 tab.value = tabs.tables
 activeName.value = tabs.nowTab
})

//当前标签页名称回调，修改标签页路径
function clickTab(tab) {
 activeName.value = tab

}


//删除标签页类型是否能使用判断
function closeDisabled(path) {
 //当前路径的下标
 let index = tab.value.findIndex(item => item.path === path)

 //当数组大于等于2可以删除其他所有的标签页
 other.value = !(tab.value.length >= 2)

 //当前下标在标签页的第一个或者大于第一个
 left.value = !(index >= 1)

 //当前下标不能超过标签页数量
 right.value = !(index + 1 < tab.value.length)
}

//关闭下拉框标签页类型
function close(type, path) {
 tabs.close(type, path)
}

//删除标签页
function tabRemove(tabName) {
 tabs.removeTables(tabName)
}

//保持只有一个下拉框
function changeItem(event, path) {
 if (!event) {
   return
 }

 //弹框的过程中将其他的关闭
 let other = oneDown.value.filter(item => item.id !== path)
 other.forEach(item => {
   item.handleClose()
 })

}