elementui中el-tabs中多个el-tab-pane下面都有一个表格 如果用循环写出来
时间: 2023-08-11 20:04:04 浏览: 154
可以使用 `v-for` 循环生成多个 `el-tab-pane` 和对应的表格。代码示例如下:
```html
<el-tabs>
<el-tab-pane v-for="(tab, index) in tabs" :key="index" :label="tab.label">
<el-table :data="tab.data">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="gender" label="Gender"></el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
```
在数据中定义每个标签页的信息,例如:
```js
data() {
return {
tabs: [
{
label: 'Tab 1',
data: [
{ name: 'John', age: 25, gender: 'Male' },
{ name: 'Mary', age: 30, gender: 'Female' },
{ name: 'Tom', age: 28, gender: 'Male' }
]
},
{
label: 'Tab 2',
data: [
{ name: 'Amy', age: 22, gender: 'Female' },
{ name: 'David', age: 35, gender: 'Male' },
{ name: 'Lucy', age: 27, gender: 'Female' }
]
}
]
}
}
```
这样就可以通过循环生成多个标签页和表格,并且每个标签页可以显示不同的数据。
阅读全文