element-ui自定义table表头
时间: 2023-11-06 09:05:26 浏览: 189
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
您可以通过element-ui的自定义表头插槽来实现自定义表头。具体步骤如下:
1. 在el-table组件中添加template属性,值为table-column。
2. 在table-column中添加自定义表头的内容,可以使用slot-scope来获取表头的数据。
3. 在el-table-column组件中添加label属性,值为自定义表头的内容。
示例代码如下:
```
<el-table :data="tableData">
<template slot="header">
<table-column>
<th>
<span>自定义表头1</span>
</th>
<th>
<span>自定义表头2</span>
</th>
</table-column>
</template>
<el-table-column prop="prop1" label="列1"></el-table-column>
<el-table-column prop="prop2" label="列2"></el-table-column>
</el-table>
```
阅读全文