el-table 表头合并
时间: 2024-10-13 21:01:26 浏览: 6
`el-table` 是 Element UI 提供的一个用于构建表格的组件,在 Vue.js 中常用于数据展示。如果你想合并表头单元格,可以使用 `el-table-column` 的 `label` 属性,并结合 `rowspan` 或 `colspan` 属性来实现。`rowspan` 控制行合并,`colspan` 控制列合并。
例如,如果你想要将某一列的标题跨越两行显示,你可以这样做:
```html
<template>
<el-table :data="tableData">
<el-table-column
prop="name"
label="姓名"
width="180"
/>
<el-table-column
prop="age"
label="年龄"
width="180"
/>
<!-- 合并的列 -->
<el-table-column
prop="address"
label="地址"
:rowspan="2" <!-- 行合并 -->
:colspan="2" <!-- 列合并 -->
></el-table-column>
<!-- 其他列... -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 25, address: '北京' },
{ name: '李四', age: 30, address: '上海' },
// 更多数据...
]
};
}
};
</script>
```
阅读全文