el-table 自定义表格表头

el-table 是 Element UI 中的一个组件，用于创建动态表格。在自定义表格表头时，你可以通过 columns 属性来配置每个列的信息，包括标题、属性、样式等。下面是一个简单的例子：
<template>
<el-table :data="tableData">
<el-table-column
prop="date" // 表示数据字段名
label="日期" // 显示在表头的文字
width="180" // 列宽
align="center" // 文本对齐方式
></el-table-column>
<!-- 可以添加更多列，例如 -->
<el-table-column
prop="name"
label="姓名"
sortable // 是否可以排序
></el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip // 当内容超出显示长度时显示提示
></el-table-column>
</el-table>
</template>

<script>
export default {
data() {
return {
tableData: [
{ date: '2022-01', name: '张三', address: '北京市' },
// 更多行...
]
}
}
}
</script>
登录后复制
如果你想完全定制表头，可以使用 <template> 标签包裹：
<template slot-scope="scope">
<th>{{ scope.label }} <span class="custom-icon"></span></th>
</template>
登录后复制
这里，slot-scope="scope" 是 Vue 的 slot 特性，scope 对象包含了当前单元格的数据和上下文信息。