el-table设置header
时间: 2023-10-03 17:09:32 浏览: 42
在使用 Element UI 的 el-table 组件时,需要设置表头(header)。可以使用以下两种方式进行设置:
1. 使用属性设置表头
可以在 el-table 组件上使用 `:columns` 属性来设置表头。例如:
```
<el-table :data="tableData" :columns="tableColumns"></el-table>
```
其中,`tableColumns` 是一个数组,每个元素表示一个表头列,包括列的名称、字段、宽度等信息。例如:
```
tableColumns: [
{ label: '姓名', prop: 'name', width: '120px' },
{ label: '年龄', prop: 'age', width: '80px' },
{ label: '地址', prop: 'address' }
]
```
2. 使用插槽设置表头
也可以使用插槽来设置表头。在 el-table 组件中,使用 `slot="header"` 插槽来设置表头。例如:
```
<el-table :data="tableData">
<template slot="header">
<el-table-column label="姓名" prop="name" width="120px"></el-table-column>
<el-table-column label="年龄" prop="age" width="80px"></el-table-column>
<el-table-column label="地址" prop="address"></el-table-column>
</template>
</el-table>
```
其中,`el-table-column` 组件表示一个表头列,包括列的名称、字段、宽度等信息。