vue2.*elementtabstab-pane 동적 불러오는 구성 요소 작업
1、주의
<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
// })
}
2. 전체 코드
<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를 사용합니다. 탭을 전환하면 실시간 불러오는 방법과 el-table 표 사용 요약...우리가 개발 중tab 전환을 만났을 때 엘의el-tabs를 사용하면 매우 편리하다
그러나 내가 코드를 다 쓴 후에 문제가 페이지가 열렸을 때
현재 탭 페이지만 볼 수 있지만 vue는 당신이 쓴 모든 탭 페이지의 내용을 과장해 줍니다. 다른 것은 숨겨져 있을 뿐입니다. 다른 탭의 js도 한쪽으로 갔습니다. 탭을 눌렀을 때 js는 백그라운드에 요청하지 않습니다.
이런 메커니즘은 문제를 일으킬 수 있다. 만약에 모든tab페이지의 데이터가 너무 크면 처음으로 페이지를 열 때 렉이 걸리는 현상을 초래할 수 있다. 또한 데이터베이스 데이터가 실시간으로 변화한다면 예를 들어 당신이 1분 전에 열었던 이 페이지는tab1의 내용을 본다. 1분을 본 후에tab2의 내용을 보고 싶지만 이때tab2의 내용 백엔드 데이터베이스에 변화가 생겼다.네가 볼 수 있는 것은 단지 1분 전의 데이터일 뿐인데, 그러면 이 문제를 어떻게 해결해야 합니까?
우선 처음에 모든 탭을 한 번에 불러오는 코드는 이렇게 ↓
<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.*elementtabstab-pane 동적 불러오는 구성 요소 작업은 여러분에게 공유된 모든 내용입니다. 참고해 주시고 저희를 많이 사랑해 주십시오.이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.