elementUI Table表格表頭自定義

element UI 官方文檔有一個 :render-header 的方法 渲染自定義結構用的是 vue 的h函數 也就是render 函數寫法

 

   //html
   <el-table-column
                
                align="center"
               :render-header="renderHeader"
                >
                 <template slot-scope="scope">
                     
                    {{scope.row.balance | changeNumber}}元
                  </template>
 
    </el-table-column>

　　

 renderHeader(h,{column,$index}){
 
//$index 表格豎行的索引值 
     
     
      
      return h(
        'div',
        {class:'',
        style:"padding-top:4px;"
        },
        [ 
          h('el-tooltip',
           {
             props:{
                content:"哈哈哈哈",
                placement:"top",
                effect:"light",
             },
           },
           [
            h('span',{
            
            },[
                h('span',"標題"),
                h('i', {
                class:'cursorPointer fa fa-question-circle colorFE7F76',
                style:'margin-left:6px;',
                }),
            ]),
             
           ],
          ),
          
       ],
      );
    },

　　h函數具體參數 位置含義 可以自行搜索,我用的是簡寫