EL虚拟化表格 用h函数自定义表头并且指定插槽

第一次使用el-table-v2，需要实现点击表头弹框来展示数据，官方文档中只有tsx的写法，没有使用h函数的写法，因此记录一下

先看下最终的效果

以下是部分代码

import { ElButton,ElRadio,ElTooltip,ElPopover } from 'element-plus';

 

//columns 是一个数组，里面的值为每一列的配置信息

const columns = [

{

    key: "ApplyDateTime",

    dataKey: "ApplyDateTime",

    title: "123",

    width: 110,

   

    headerCellRenderer: () =>
       //这里用到ElPopover要引入

      h(ElPopover,

      {

        placement:"bottom",

        title:"Title",

        width:"200",

        trigger:"click",

        content:"this is content, this is content, this is content"

      },

      {
        //elpopover下有两个插槽，这里要用reference插槽

        reference: props=>h(ElButton,{},"click here"),
        default: props=>[
             h(ElTree,{data:ApplyDateTimeTreeList.value,props:defaultProps,"show-checkbox":true},)
            ,h(ElButton,{onClick: () => {console.log('确认')}},"确认")
            ,h(ElButton,{onClick: () => {console.log('重置')}},"重置")
        ],

      }

      ),

     

  }

]