elementui表头

ElementUI 表头自定义方法

调整表头样式
通过 header-cell-style 属性可设置表头单元格样式，接受对象或返回对象的函数。例如修改背景色和文字颜色：

<el-table :data="tableData" :header-cell-style="{background: '#f5f7fa', color: '#606266'}">
</el-table>

添加表头提示信息
使用 render-header 自定义表头渲染，结合 el-tooltip 实现悬浮提示：

<el-table-column prop="date" label="日期">
  <template slot="header" slot-scope="scope">
    <el-tooltip content="这是日期字段提示" placement="top">
      <span>{{ scope.column.label }}</span>
    </el-tooltip>
  </template>
</el-table-column>

固定表头与多级表头
设置 height 属性可固定表头，滚动内容时表头保持可见。多级表头通过嵌套 el-table-column 实现：

<el-table :data="tableData" height="400px">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column label="详细信息">
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table-column>
</el-table>

动态表头与排序
通过 v-for 动态生成表头，结合 sortable 属性启用排序：

<el-table :data="tableData">
  <el-table-column 
    v-for="item in headerConfig" 
    :key="item.prop" 
    :prop="item.prop" 
    :label="item.label" 
    :sortable="item.sortable">
  </el-table-column>
</el-table>

表头内容换行
使用 CSS 控制表头文本换行，需设置 white-space 和 word-break：

.el-table .cell {
  white-space: pre-line;
  word-break: break-all;
}