elementUI Table表格表头自定义

Posted 2020-12-10 tianmiaogongzuoshi

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函数具体参数 位置含义 可以自行搜索,我用的是简写