el-table显示二维数组,二维数组中有相同字段,也有不同字段,字段值不同,怎么显示不会重复显示字段值,多级表头
时间: 2024-03-19 14:46:13 浏览: 107
可以使用`<el-table-column>`组件的`children`属性来实现多级表头,然后通过循环遍历二维数组来动态生成表格数据。具体步骤如下:
1. 定义一个数组`columns`,用来存放多级表头的定义。
2. 对二维数组进行遍历,获取所有不重复的字段名,并将其添加到`columns`数组中。
3. 使用`v-for`指令和`v-if`指令来循环遍历二维数组,并根据字段名判断是否需要显示对应的数据。
4. 使用`<el-table-column>`组件来动态生成多级表头,并根据字段名来获取对应的数据。
下面是代码示例:
```html
<template>
<el-table :data="tableData" border style="width: 100%">
<el-table-column label="ID" prop="id"></el-table-column>
<el-table-column label="Name" prop="name"></el-table-column>
<template v-for="(column, index) in columns" :key="index">
<el-table-column :label="column" :key="column">
<template v-for="(row, rowIndex) in tableData" :key="rowIndex">
<template v-if="row[column] !== undefined">
<el-table-column :label="getFieldLabel(column)" :key="getFieldKey(column)">
{{ row[column] }}
</el-table-column>
</template>
</template>
</el-table-column>
</template>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John', age: 25, gender: 'Male', country: 'USA' },
{ id: 2, name: 'Alice', age: 30, gender: 'Female', city: 'Paris' },
{ id: 3, name: 'Bob', age: 35, gender: 'Male', country: 'Canada' },
],
columns: ['age', 'gender', 'country', 'city'],
};
},
methods: {
getFieldLabel(field) {
switch (field) {
case 'age':
return 'Age';
case 'gender':
return 'Gender';
case 'country':
return 'Country';
case 'city':
return 'City';
default:
return '';
}
},
getFieldKey(field) {
return `field-${field}`;
},
},
};
</script>
```
在上面的代码中,我们首先定义了一个数组`columns`,用来存放多级表头的定义。然后对二维数组`tableData`进行遍历,获取所有不重复的字段名,并将其添加到`columns`数组中。接着在模板中使用`v-for`指令和`v-if`指令来循环遍历二维数组,并根据字段名判断是否需要显示对应的数据。最后使用`<el-table-column>`组件来动态生成多级表头,并根据字段名来获取对应的数据。`getFieldLabel`方法用来获取字段的显示名称,`getFieldKey`方法用来生成唯一的`key`值,避免重复。
阅读全文