【在 Element UI 的表格中为表头添加必填星号标识（红色*）】

方法一：使用 render-header 函数（推荐）

通过 render-header 属性自定义表头渲染逻辑，动态插入红色星号。

<template>
  <el-table :data="tableData">
    <!-- 普通列 -->
    <el-table-column prop="name" label="姓名"></el-table-column>
    
    <!-- 必填列（带红色星号） -->
    <el-table-column
      prop="age"
      :render-header="renderRequiredHeader('年龄')"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    /**
     * 生成必填表头渲染函数
     * @param {string} label - 表头文本
     * @returns {Function} - 返回 render-header 函数
     */
    renderRequiredHeader(label) {
      return (h) => {
        return h('div', { class: 'required-header' }, [
          h('span', { style: { color: 'red', marginRight: '4px' } }, '*'),
          h('span', label)
        ]);
      };
    }
  }
};
</script>

<style>
/* 调整表头内容对齐（可选） */
.required-header {
  display: flex;
  align-items: center;
}
</style>

---

方法二：使用 slot 自定义表头

通过 slot 插槽自定义表头内容，适合需要更复杂布局的场景。

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    
    <!-- 自定义必填表头 -->
    <el-table-column prop="age">
      <template slot="header">
        <span style="color: red; margin-right: 4px">*</span>
        <span>年龄</span>
      </template>
    </el-table-column>
  </el-table>
</template>

---

效果说明

方法	优点	缺点
render-header	动态生成，适合批量处理多列	需要手动处理样式和布局
slot	直观易控，适合简单场景	每列需单独写模板，代码冗余

---

扩展：动态控制必填标识

若需根据数据动态显示星号，可结合业务逻辑判断：

// 在 render-header 中动态判断
renderRequiredHeader(label, field) {
  return (h) => {
    const isRequired = this.requiredFields.includes(field); // 根据字段判断是否必填
    return h('div', { class: 'required-header' }, [
      isRequired ? h('span', { style: { color: 'red', marginRight: '4px' } }, '*') : null,
      h('span', label)
    ]);
  };
}

---

注意事项

1. 样式穿透
   如果使用 <style scoped>，需通过 /deep/ 修改表头样式：

   /deep/ .required-header {
     display: flex;
     align-items: center;
   }

2. 排序图标兼容
   如果列启用了排序，需预留空间避免星号与排序图标重叠：

   <template slot="header">
     <span style="color: red; margin-right: 4px">*</span>
     <span>年龄</span>
     <!-- Element UI 默认排序图标会自动附加 -->
   </template>

通过以上方法，可以灵活实现 Element UI 表格表头的必填星号标识。