elementui表头

ElementUI 表头自定义方法

修改表头样式 通过 header-cell-class-name 属性为表头单元格添加自定义类名，配合 CSS 实现样式修改。例如更改背景色和字体：

.el-table .custom-header {
  background-color: #f5f7fa;
  font-weight: bold;
  color: #606266;
}

<el-table :header-cell-class-name="'custom-header'">
  <!-- 表格内容 -->
</el-table>

动态表头内容 使用 render-header 属性自定义表头渲染函数，可插入图标或交互元素：

<el-table :columns="columns">
  <el-table-column
    prop="date"
    :render-header="renderHeader">
  </el-table-column>
</el-table>

methods: {
  renderHeader(h, { column }) {
    return h('div', [
      h('span', column.label),
      h('el-tooltip', {
        props: { content: '提示信息', placement: 'top' }
      }, [
        h('i', { class: 'el-icon-question' })
      ])
    ])
  }
}

合并表头 通过 el-table-column 嵌套实现多级表头，适用于复杂数据结构展示：

<el-table :data="tableData">
  <el-table-column label="主要信息">
    <el-table-column prop="name" label="姓名"/>
    <el-table-column prop="age" label="年龄"/>
  </el-table-column>
  <el-table-column label="次要信息">
    <el-table-column prop="address" label="地址"/>
  </el-table-column>
</el-table>

固定表头与列 设置 height 属性启用表头固定，配合 fixed 属性实现列固定：

<el-table 
  :data="tableData"
  height="400px">
  <el-table-column prop="id" label="ID" fixed/>
  <el-table-column prop="name" label="姓名" fixed="right"/>
  <el-table-column v-for="item in 20" :key="item" :label="'列'+item"/>
</el-table>

表头排序功能 在列定义中设置 sortable 属性启用排序，支持远程或本地排序：

<el-table :data="tableData" @sort-change="handleSortChange">
  <el-table-column prop="date" label="日期" sortable/>
  <el-table-column prop="value" label="数值" sortable :sort-method="customSort"/>
</el-table>

methods: {
  customSort(a, b) {
    return a.value - b.value;
  },
  handleSortChange({ prop, order }) {
    // 处理排序逻辑
  }
}