vue eltable自定义渲染表头及添加图标render-header h函数

前沿： 

        有些业务需要显示一些图标，那么就用到了自定义表头，el-table表格表头render-header自定义列表标题，添加一些符号，图标等

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

 

🧨自定义 

自定义column渲染:

    {prop: "money",label: "金额",width:"120", align: "center",sortable: true,renderHeader:  (h, { column })=> {
          return h('span', [
            h('span', column.label),
            h('i', {
                class: 'iconfont icon-jine',
                style: 'color: red;margin-left:5px;cursor:pointer;'
              }),
          ])
        }},

🧨v2写法 

//render-header="renderHeader "  renderHeader 方法
renderHeader(h,column ){
      const arr = ["money",'custom_fee','transfer_fee','close_money','offset_money','custom_fee_over'];//哪些表头字段需要添加图标
      if (arr.includes(column.property)) {
        return h('span', [
            h('span', column.label),
            h('i', {
                class: 'iconfont icon-jine',
                style: 'color: red;margin-left:5px;cursor:pointer;'
              }),
          ])
      }
    },

🧨v3用法 

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");
}

🧨🧨​​​​​​​🧨扩展：

       增加提示符文字：

1. headertip: '显示金额',

 h('el-popover', { props: { placement: 'top', width: '100%', trigger: 'hover', content: b.headertip,'popper-class':'monitor-yt-popover' }}, [
           h('i', { slot: 'reference', class:'el-icon-question',style: {cursor: 'pointer'}}, '')
          ])

 

 

 renderHeader(h,column ){
      const arr = ["money",'custom_fee','transfer_fee','close_money','offset_money','custom_fee_over'];//哪些表头字段需要添加图标
      console.log(h,column,arr,'---column')
      if (arr.includes(column.property)) {
        return h('span', [
            h('span', column.label),
            h('el-popover', { props: { placement: 'top', width: '100%', trigger: 'hover', content: column.headertip,'popper-class':'monitor-yt-popover' }}, [
              // h('i', { slot: 'reference', class:'el-icon-question',style: {cursor: 'pointer'}}, '')
              h('i', {
                slot: 'reference',
                class: 'iconfont icon-jine',
                style: 'color: red;margin-left:5px;cursor:pointer;'
              }),
                //想加其他属性图标，可以再下面加
                //........
            ])
          ])
      }
    },