| | |
|---|
| | | <!-- 在你的主页面中 --> |
|---|
| | | <template> |
|---|
| | | <div class="app-container"> |
|---|
| | | <el-tabs v-model="activeTab" type="card"> |
|---|
| | | <el-tabs v-model="activeTab" @tab-change="handleTabChange"> |
|---|
| | | <el-tab-pane label="正常供应商" name="home"> |
|---|
| | | <HomeTab /> |
|---|
| | | <HomeTab ref="homeTab" /> |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane label="黑名单" name="blacklist"> |
|---|
| | | <BlacklistTab /> |
|---|
| | | <BlacklistTab ref="blacklistTab" /> |
|---|
| | | </el-tab-pane> |
|---|
| | | </el-tabs> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | activeTab: 'home' |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | activeTab(newVal) { |
|---|
| | | if (newVal === 'home') { |
|---|
| | | this.$refs.homeTab && this.$refs.homeTab.getList() |
|---|
| | | } else if (newVal === 'blacklist') { |
|---|
| | | this.$refs.blacklistTab && this.$refs.blacklistTab.getList() |
|---|
| | | } |
|---|
| | | } |
|---|
| | | methods: { |
|---|
| | | handleTabChange(tabName) { |
|---|
| | | this.activeTab = tabName |
|---|
| | | this.$nextTick(() => { |
|---|
| | | if (tabName === 'home') { |
|---|
| | | this.$refs.homeTab && this.$refs.homeTab.getList && this.$refs.homeTab.getList() |
|---|
| | | } else if (tabName === 'blacklist') { |
|---|
| | | this.$refs.blacklistTab && this.$refs.blacklistTab.getList && this.$refs.blacklistTab.getList() |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style> |
|---|
| | | .main-container :deep(.el-tabs__item.is-active) { |
|---|
| | | color: #1883f6 !important; |
|---|
| | | border-bottom: 2px solid #409EFF; |
|---|
| | | } |
|---|
| | | |
|---|
| | | </style> |
|---|
