可以通过循环来动态生成多个 `el-tab-pane` 和表格,每个表格的字段名不同,可以定义一个数组来存储每个表格的列信息,然后在循环中根据当前的索引值来获取对应的列信息。
例如,假设有三个 `el-tab-pane` 分别对应三个表格,每个表格的列信息分别为:
```javascript
const columnsList = [
[
{ label: '姓名', prop: 'name' },
{ label: '年龄', prop: 'age' },
{ label: '地址', prop: 'address' }
],
[
{ label: '编号', prop: 'id' },
{ label: '职位', prop: 'position' },
{ label: '工资', prop: 'salary' }
],
[
{ label: '商品名称', prop: 'name' },
{ label: '价格', prop: 'price' },
{ label: '库存', prop: 'stock' }
]
]
```
可以在 `el-tabs` 中使用 `v-for` 循环生成多个 `el-tab-pane`,然后在每个 `el-tab-pane` 中使用 `v-for` 循环生成对应的表格,代码示例如下:
```html
<template>
<el-tabs>
<!-- 使用 v-for 循环生成多个 el-tab-pane -->
<el-tab-pane v-for="(item, index) in tabsList" :label="item.label" :key="index">
<el-table :data="tableData[index]" :columns="columnsList[index]">
<!-- 使用 v-for 循环生成表格列 -->
<el-table-column v-for="(column, columnIndex) in columnsList[index]" :label="column.label" :prop="column.prop" :key="columnIndex"></el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
tabsList: [
{ label: '用户信息' },
{ label: '员工信息' },
{ label: '商品信息' }
],
tableData: [
[
{ name: '张三', age: 18, address: '北京' },
{ name: '李四', age: 20, address: '上海' },
{ name: '王五', age: 22, address: '广州' }
],
[
{ id: '001', position: '经理', salary: 10000 },
{ id: '002', position: '员工', salary: 5000 },
{ id: '003', position: '实习生', salary: 2000 }
],
[
{ name: '手机', price: 2999, stock: 100 },
{ name: '平板电脑', price: 3999, stock: 50 },
{ name: '笔记本电脑', price: 5999, stock: 20 }
]
],
columnsList: [
[
{ label: '姓名', prop: 'name' },
{ label: '年龄', prop: 'age' },
{ label: '地址', prop: 'address' }
],
[
{ label: '编号', prop: 'id' },
{ label: '职位', prop: 'position' },
{ label: '工资', prop: 'salary' }
],
[
{ label: '商品名称', prop: 'name' },
{ label: '价格', prop: 'price' },
{ label: '库存', prop: 'stock' }
]
]
}
}
}
</script>
```