在ElementUI中,el-tab-pane的循环渲染可以通过使用v-for指令结合动态数据来实现。以下是一个简单的示例代码:
<template>
<el-tabs v-model="activeTab">
<el-tab-pane v-for="(tab, index) in tabs" :label="tab.label" :name="tab.name" :key="index">
<p>{{ tab.content }}</p>
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeTab: 'tab1',
tabs: [
{ label: 'Tab 1', name: 'tab1', content: 'Content of Tab 1' },
{ label: 'Tab 2', name: 'tab2', content: 'Content of Tab 2' },
{ label: 'Tab 3', name: 'tab3', content: 'Content of Tab 3' }
]
};
}
};
</script>
在上面的示例中,我们通过v-for指令遍历tabs数组,动态渲染el-tab-pane组件。每个tab对象包含了标签、名称和内容等属性,通过绑定这些属性可以实现循环渲染。在el-tabs组件中使用v-model指令绑定activeTab属性,实现tab切换功能。