阅读量:0
在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切换功能。
