码迷,mamicode.com
首页 > 其他好文 > 详细

elementUI Table表格表头自定义

时间:2020-06-11 21:29:21      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:哈哈哈   render   文档   ret   template   color   col   splay   turn   

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

elementUI Table表格表头自定义

标签:哈哈哈   render   文档   ret   template   color   col   splay   turn   

原文地址:https://www.cnblogs.com/tianmiaogongzuoshi/p/13095924.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!