el-table表头自定义

《el-table》是Element UI库中的一个重要组件，用于创建可定制的数据表格。在`el-table`中，表头自定义非常灵活，你可以根据需求对表头进行如下操作：

1. **数据绑定**: 可以直接将列名、字段等数据作为配置项传入，动态生成表头标题。

<template>
  <el-table :data="tableData" :columns="columns">
    <!-- ... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: ...,
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        // 自定义列，如自定义的复选框列
        { type: 'selection', width: 60, label: '选择' }
      ]
    };
  }
};
</script>

2. **模板渲染**: 使用`render-header`属性提供自定义渲染函数，可以在其中插入任意HTML元素或使用Vue组件。

<el-table-column
  render-header="customHeaderRender"
  header-align="center"
></el-table-column>

<script>
methods: {
  customHeaderRender(h, { column, $index }) {
    return h('span', `第${$index + 1}列`, { class: 'custom-header' });
  }
}
</script>

3. **事件处理**: 在自定义表头上添加点击事件或排序功能，可以通过`@click`或`sort-method`来实现。

<el-table-column
  label="点击排序"
  @click="handleSort"
></el-table-column>

<script>
methods: {
  handleSort(column) {
    this.$emit('sort', column.prop);
  }
}
</script>