el-table多级表头导入
时间: 2023-10-02 13:05:25 浏览: 48
在使用 Element UI 的 el-table 组件时,如果需要实现多级表头导入,可以通过配置 columns 属性来实现。下面是一个示例代码:
```vue
<template>
<el-table :data="tableData" border>
<el-table-column v-for="column in columns" :key="column.label" :label="column.label" :prop="column.prop">
<template v-if="column.children">
<el-table-column v-for="child in column.children" :key="child.label" :label="child.label" :prop="child.prop"></el-table-column>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 20, gender: 'Male' },
{ name: 'Jane', age: 25, gender: 'Female' },
{ name: 'Tom', age: 30, gender: 'Male' },
],
columns: [
{
label: 'Name',
prop: 'name',
},
{
label: 'Basic Info',
children: [
{
label: 'Age',
prop: 'age',
},
{
label: 'Gender',
prop: 'gender',
},
],
},
],
};
},
};
</script>
```
在上述示例中,通过配置 columns 数组来定义表头结构,每个对象代表一个表头列,其中 label 属性为列标题,prop 属性为对应的数据字段名。如果需要多级表头,则在对应的列对象中添加 children 数组,继续配置子列的信息。
请注意,以上示例仅展示了基本的多级表头导入,你可以根据实际需求进行修改和扩展。