ElementUI中table表格自定义表头Tooltip文字提示

Posted 2023-04-08

参考技术A 应用 element 中的 table 组件，自定义表头 Tooltip 文字提示。

请点这里

在 main.js 中引入

在 src -> modules -> components -> messages 中增加 promptMessages 组件及 index.js 文件

promptMessages 组件

index.js 文件

在 utils 文件夹 📁 下，新增 components.js 用于 引入全局组件
components.js 文件

最后在 main.js 中引入 components.js 文件即可全局使用 promptMessages 组件。

应用了 element table 组件的 render-header （列标题 Label 区域渲染使用的 Function ）。

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