elementui表格中加表头
时间: 2023-11-14 19:08:48 浏览: 249
在 ElementUI 表格中,可以通过 `el-table-column` 组件来添加表头。具体步骤如下:
1. 在 `el-table` 组件中添加 `el-table-column` 组件,设置 `prop` 属性为表格数据中对应的字段名,设置 `label` 属性为表头显示的文本。
2. 如果需要合并表头,可以在 `el-table-column` 组件中设置 `colspan` 和 `rowspan` 属性。
3. 如果需要对表头进行排序,可以在 `el-table-column` 组件中设置 `sortable` 属性为 `true`。
示例代码如下:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市' },
{ name: '李四', age: 20, address: '上海市' },
{ name: '王五', age: 22, address: '广州市' }
]
}
}
}
</script>
```
阅读全文
相关推荐


















