在Vue项目中使用Element-UI的el-tabs组件，需求是在页面加载时自动获取后台数据并动态渲染子组件，同时跳转到第一个标签页。代码示例显示了如何在`created`生命周期钩子中调用API获取数据，然后根据数据动态创建`el-tab-pane`。每个`el-tab-pane`与子组件`UpsPage`关联，通过`v-if`和`item.active`来控制显示。目前的问题是如何在页面加载时自动设置第一个`item.active`为true，实现自动切换到第一个标签页。
附上代码
<div class="ups">
<el-tabs v-model="editableTabsValue" type="card" @tab-click="show_upsPage" class="sub">
<el-tab-pane :key="item.name"
v-for="item in editableTabs"
:label="item.title"
:name="item.name">
<upsPage v-if="item.active"></upsPage>
</el-tab-pane>
</el-tabs>
</div>
// import { getList } from ‘@/api/table’
import UpsPage from ‘@/views/table/UPS/UpsPage/’
export default {
components: {
upsPage: UpsPage
},
name: 'UPS',
data() {
return {
editableTabsValue: 'A',
editableTabs: []
}
},
methods: {
show_upsPage(event) {
// var _this = this
console.log(this.editableTabs)
this.editableTabs.forEach(function(item) {
if (item.name === event.name) {
item.active = true
} else {
item.active = false
}
})
}
},
created: function() {
this.$store.dispatch('upsNumber').then((res) => {
this.editableTabs = res.data
}).catch(() => {
})
console.log(this.editableTabs)
}
}
子组件的渲染是通过v-if进行的，而渲染的子组件是需要和item.name进行对应的，由于v-if中的变量名item.active并不是多个，所以需要关联item.name进行单独判断，由此达到后台有多少个数据就能渲染多少个子组件的目的，求各路大神支招。
扫一扫
4899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
