vue3 自定义渲染表头及添加图标el-table render-header h函数

el-table-column 添加  :render-header="renderHeader"

import sortIcon from "./sortIcon.vue"; //表单父组件引入方式
import {h} from "vue";//引入h
//render-header="renderHeader "  renderHeader 方法
const renderHeader = ({ column }) => {
  const styleFilter= {
    'height': '9px',
    'width': '30px',
  }
  const arr = ["a",'b','c'];//哪些表头字段需要添加图标
  if (props.selectPlanYield && arr.includes(column.property)) {
    return h("div", [
      h("span", column.label),
      h("div", [
        h(sortIcon, {  //sortIcon组件名字
          onClick: handeSort,//给组件传递点击事件on +自定义名字 首字母必须大写，子组件用emits('click')触发
          property: column.property,//props传值,子组件还是props接收
          style: {
          },
        }),
      ]),
      h(filterIcon, {
        onClick: handeFiler,
        onClose: handleCancel,
          property: column.property,
        style: {
          ...styleFilter,//设置样式
        },
      }),
    ]);
  } else {
    return h("div", [h("span", column.label)]);//其他表头字段
  }
};


//sortIcon 子组件接收和触发事件

const props = defineProps({
  property: {
    type: String,
    default: "",
  },
});

const = handleClick =()=>{
emit("click");
}

表头样式如下