elementui怎么给表格标题添加样式和文本

如图所示，在elementUI需要在添加一个红色的 “*”号来表示该内容是必填项。

如何自定义elementui表格表头

方法一：使用slot="header"自定义标头

 <el-table :data="tableData"  style="width: 100%">
    <el-table-column label="Date" prop="date"> </el-table-column>
     
    <el-table-column  >
      <template slot="header" slot-scope="scope">
        <p><span style="color:#ff1818">*</span>人工附件值</p>
      </template>
      <template slot-scope="scope">
       <el-input  v-model="search" size="mini" placeholder="输入关键字搜索"/>
      </template>
    </el-table-column>
  </el-table>
 

方法二：render-header 列标题 Label 区域渲染使用的 Function

<el-table :data="tableData"  style="width: 100%">
    <el-table-column label="Date" prop="date"> </el-table-column>
     
    <el-table-column label="复检结果" :render-header="remarkRenderHeader" >
     
      <template slot-scope="scope">
       <el-input  v-model="search" size="mini" placeholder="输入关键字搜索"/>
      </template>
    </el-table-column>
  </el-table>

remarkRenderHeader函数

remarkRenderHeader(h, { column, $index }) {
            return h('span', [
                h(
                    'span',
                    {
                        style: {
                            color: '#ff1818',
                        },
                    },
                    '*'
                ),
                h('span', column.label),
            ])
        },

这样我们就可以自定义甚至动态的使用elementUI表头内容了