el-table 表格自定义表头

element-ui 和 element-plus 设置表头的用法不同

element-ui

element-ui 版本中，使用render-header属性进行设置，官网如下定义：

el-table-column 属性

重点：:render-header="renderHeader"

<el-table-column label="数据异常掉线正常上传" prop="dataStatus" :render-header="renderHeader" width="200" align="center"></el-table-column>

renderHeader 方法

renderHeader(h, { column, $index }) {
	return h('div',{},[
		h('svg',{
            class: ['icon'],
            'aria-hidden': "true"
        },[
            h('use',{
                'xlink:href': '#icon-form_icon_normal'
            })
        ]),
        h('span',{},'正常上传 '),
        // h('br',{},''),
        h('svg',{
            class: ['icon'],
            'aria-hidden': "true"
        },[
            h('use',{
                'xlink:href': '#icon-yichang'
            })
        ]),
        h('span',{},'数据异常掉线'),
])
},

element-plus

element-plus版本也可使用第一种方法，但控制台会有警告，同时renderHeader中的h标签，需在组件中引入import { h } from 'vue';
因此，我们可通过第二种办法进行设置，代码简洁且不生成警告：
重点：<template slot="header" #header="scope">

 <el-table-column label="数据异常掉线正常上传" prop="dataStatus" width="200" align="center">
 	<!-- 表头 -->
    <template slot="header" #header="scope">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-form_icon_normal"></use>
        </svg>
        <span>正常上传&nbsp;&nbsp;</span>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yichang"></use>
        </svg>
        <span>数据异常掉线</span>
    </template>
    <!-- 内容 -->
    <template #default="scope">
        <svg class="icon" aria-hidden="true" v-if="scope.row.dataStatus">
            <use xlink:href="#icon-form_icon_normal"></use>
        </svg>
        <svg class="icon" aria-hidden="true" v-else>
            <use xlink:href="#icon-yichang"></use>
        </svg>
    </template> 
</el-table-column>