elementplus中標籤頁操作

Kang_kin發表於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()
 })

}

相關文章