el-table多级表格
时间: 2024-01-10 13:21:26 浏览: 31
el-table是ElementUI中的一个表格组件,可以用于展示数据。要实现多级表头的效果,可以在el-table-column组件内嵌套el-table-column组件。
以下是一个示例代码,展示了如何使用el-table实现多级表头的效果:
```html
<template>
<el-table :data="tableData">
<el-column label="一级表头" align="center <el-table-column label="二级表头1" align="center">
<el-column prop="column1" label="列1" align="center"></el-table-column>
<el-table-column prop="column2" label="列2" align="center"></el-table-column>
</el-table-column>
<el-table-column label="二级表头2" align="center">
<el-table-column prop="column3" label="列3" align="center"></el-table-column>
<el-table-column prop="column4" label="列4" align="center"></el-table-column>
</el-table-column>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
column1: "数据1",
column2: "数据2",
column3: "数据3",
column4: "数据4"
}
]
};
}
};
</script>
```
在上述代码中,我们在el-table-column组件内嵌套了el-table-column组件,实现了多级表头的效果。你可以根据实际需求修改表头的层级和列数。