溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是vue2.* element tabs tab-pane如何動態加載組件，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
一、重要部分
1、 注意 <component :is=item.content></component> ：表明模板
<el-tab-pane
v-for="(item) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
<component :is=item.content></component>
</el-tab-pane>2、content: 'Jbxx' ，其中 jbxx 是 模板
addTab (targetName, route) {
let newTabName = ++this.tabIndex + ''
this.editableTabs.push({
title: targetName,
name: newTabName,
content: 'Jbxx'
})
this.editableTabsValue = newTabName
if (targetName === '基本信息') {
this.show = true
} else {
this.show = false
}
// this.$router.push({
// path: route
// })
}二、完整代碼
<template>
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
<el-tab-pane
v-for="(item) in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
<component :is=item.content></component>
</el-tab-pane>
</el-tabs>
</template>
<script>
import VueEvent from '../model/VueEvent.js'
import Jbxx from './jgxx/Jbxx'
export default {
data () {
return {
show: false,
editableTabsValue: '2',
editableTabs: [{
title: 'Tab 1',
name: '1',
content: ''
}, {
title: 'Tab 2',
name: '2',
content: ''
}],
tabIndex: 2
}
},
methods: {
addTab (targetName, route) {
let newTabName = ++this.tabIndex + ''
this.editableTabs.push({
title: targetName,
name: newTabName,
content: 'Jbxx'
})
this.editableTabsValue = newTabName
if (targetName === '基本信息') {
this.show = true
} else {
this.show = false
}
// this.$router.push({
// path: route
// })
},
removeTab (targetName) {
let tabs = this.editableTabs
let activeName = this.editableTabsValue
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1]
if (nextTab) {
activeName = nextTab.name
}
}
})
}
this.editableTabsValue = activeName
this.editableTabs = tabs.filter(tab => tab.name !== targetName)
}
},
mounted () {
VueEvent.$on('to-main', (name, route) => {
this.addTab(name, route)
})
},
components: {
Jbxx
}
}
</script>
<style scoped>
</style>補充知識：在vue中使用elementUI餓了么框架使用el-tabs，切換Tab如何實現實時加載，以及el-table表格使用總結...
當我們在開發中遇到tab切換，這時候用el的el-tabs感覺很方便
但當我在把代碼都寫完后，發現一個問題就是頁面打開時
雖然我們只能看見當前一個tab頁，但是vue會幫你把你寫的所有tab頁的內容都渲染出來了，只是其他的隱藏了，同時其他tab的js也都走了一邊，當你點擊tab時js就不會再去請求后臺
這種機制會造成一個問題，就是如果每個tab頁的數據都過大的時候，可能就會導致首次打開頁面卡頓現象，同時如果數據庫數據在實時發生變化的話，比如你一分鐘前打開的這個頁面，看的是tab1的內容，看了1分鐘后我想看tab2的內容，但此時tab2的內容后臺數據庫已經發生變化了，你能看到的只是1分鐘前的數據，那該怎么解決這個問題呢？
首先一開始一次加載所有tab的代碼是這樣的↓
<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
<el-tab-pane label="待處理" name="first">
<processed/> <!--這里是自定義的子模塊，也就是自定義組件-->
</el-tab-pane>
<el-tab-pane label="已處理" name="second">
<un-processed/>
</el-tab-pane>
</el-tabs>這時候v-if的作用就可以發揮出來了，當v-if的值為false時vue是不會去渲染該標簽下的內容的
那我們就把tabs下的子模塊標簽上加v-if，一開始只設置其中一個為true其他都為false，當點擊tab切換時去改變v-if的值，代碼如下↓
<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
<el-tab-pane label="待處理" name="first" :key="'first'">
<processed v-if="isFirst"/>
</el-tab-pane>
<el-tab-pane label="已處理" name="second" :key="'second'">
<un-processed v-if="isSecond"/>
</el-tab-pane>
</el-tabs>js的代碼↓
<script>
import Breadcrumb from '@/components/Breadcrumb'
import Processed from './processed'
import UnProcessed from './unprocessed'
export default {
components: {
Breadcrumb,
Processed,
UnProcessed
},
data() {
return {
// 默認第一個Tab
activeName: 'first',
isFirst: true,
isSecond: false
}
},
methods: {
handleClick(tab) {
if (tab.name === 'first') {
this.isFirst = true
this.isSecond = false
} else if (tab.name === 'second') {
this.isFirst = false
this.isSecond = true
}
}
}
}
</script>這樣就可以完美解決上面的問題，首次加載頁面只會渲染其中一個tab的內容，同時點擊tab切換時頁面重新渲染頁面，good！
el-table中動態表頭的寫法
其實就是一個v-for循環，根據后臺返回數據生成對應表頭
<el-table-column v-for="item in
tableHeader"
:key="item.key"
:prop="item.key"
:label="item.name"
:formatter="item.formatter"
align="center"
show-overflow-tooltip></el-table-column>js里的數據綁定：
tableHeader: [
{
name: '手機號碼',
key: 'partnerPhone'
},
{
name: '姓名',
key: 'partnerName'
},
{
name: '職位',
key: 'position',
formatter: this.posFormatter
},
{
name: '團隊',
key: 'teamName'
},
{
name: '代理商',
key: 'agentName'
},
{
name: '狀態',
key: 'state',
formatter: this.stFormatter
}
]看完這篇關于vue2.* element tabs tab-pane如何動態加載組件的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
