el-table render-header 实现多级 表头

<template slot="header">
  <span>
    <el-popover placement="right" trigger="hover">
      <p>A类代表EPC项目</p>
      <p>B类代表施工总承包项目或PC项目</p>
      <p>C类代表专业承包项目</p>
      <p>Q表示强制使用</p>
      <p>T表示推荐使用</p>
      <p>S表示试点使用</p>
      <p slot="reference">
        推荐级别
        <i class="el-icon-question"></i>
      </p>
    </el-popover>
  </span>
  <p class="type" style="width: 100%; display: flex; justify-content: space-between">
    <span v-for="item2 in recommendCategoryList" :key="item2.id">{
   
   { item2.name }}a</span>
  </p>
</template> 
 <template slot-scope="scope">
   <p class="type" style="width: 100%; display: flex; justify-content: space-between">
     <span class="typeitem" v-for="(item, index) in scope.row.type" :key="index">{
   
   { item }}</span>
   </p>
 </template>

// 加载推荐级别列头
    handleRenderTableHeader(h, {
     
      column, $index }) {
    
    
      console.log(column, $index)
      let recommendCategoryList = this.recommendCategoryList
      return h('span', {
    
    }, [
        h('el-popover', {
    
     props: {
    
     placement: 'right', trigger: 'hover' } }, [
          h('p', '这是一条提示语'),
          h('p', '第二条提示语'),
          h('p', {
    
    
            slot: 'reference',
            domProps: {
    
    
              innerHTML: '表头' + `<i class="el-icon-question"></i>`,
            },
          }),
        ]),
        h(
          'p',
          {
    
    
            class: 'type',
            style: {
    
    
              width: '100%',
              display: 'flex',
              justifyContent: 'space-around',
              flexWrap: 'nowrap',
            },
          },
          // 第二层表头 动态列
          [
            recommendCategoryList.map((el) => {
    
    
              return h(
                'span',
                {
    
    
                  title: el.name,
                  class: 'text-overflow',
                },
                el.name
              )
            }),
          ]
        ),
      ])
    },