在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切換功能。