el-table自定义表头
时间: 2023-06-30 11:22:14 浏览: 69
要自定义 el-table 的表头,你可以使用 scoped slot 来实现。
首先,在 el-table 中添加一个名为 header 的 scoped slot,并将其绑定到一个函数,如下所示:
```html
<el-table :data="tableData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
{{ scope.row.name }} 的操作
</template>
</el-table-column>
<!-- 自定义表头 -->
<template slot="header">
<el-table-header>
<el-table-row>
<el-table-header-column>姓名</el-table-header-column>
<el-table-header-column>年龄</el-table-header-column>
<el-table-header-column>操作</el-table-header-column>
</el-table-row>
</el-table-header>
</template>
</el-table>
```
在上面的例子中,我们通过 `slot="header"` 来定义一个自定义表头。在这个 slot 内部,我们使用了 el-table-header-column 来定义每一列的表头。最终的效果与普通表头类似,但是我们可以自定义表头的样式和内容。
需要注意的是,如果你使用了自定义表头,那么 el-table-column 中的 `label` 属性将会被忽略。你需要在自定义表头中手动定义每一列的表头。