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 }}aspan>
  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: '表头' + ``,
            },
          }),
        ]),
        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
              )
            }),
          ]
        ),
      ])
    },