ElementUI table 表頭 標題 添加 懸浮提示 tooltip

我的方案：

    
            <el-table-column label="優勢度" :render-header="renderHeader3" prop="DominanceDegree1" align="center" min-width="60px"/>

methods中添加方法

renderHeader3(h, params) {
      // console.log('h', h)
      // console.log('params', params)
      return h('el-tooltip',
        {
          props: {
            transfer: true
            // placement: 'bottom-start'
          }
        },
        [
          h('span', params.column.label),
          h('div',
            {
              // 'class': {
              //   'el-tooltip__popper': true
              // },
              slot: 'content'

            },
            [
              h('p', '表示群落中某一物種在其中所占的優勢程度，公式：Y=ni/N*fi,N代表各采樣點所有物種個體總數，ni代表第i種的個體總數，fi代表物種在各個采樣點出現的頻率，但Y>0.02時，該物種為群落中的優勢種。')

            ]
          )
        ]
      )
    },

缺陷：我對懸浮提示的樣式 el-tooltip__popper修改不起作用，添加新的樣式也失效。 若內容多，樣式會顯示的非常長，直到暫滿頁面才會自動換行。（此方案受到iview tooltip用法啟發，但樣式這又不同）

 

可以多加一個方法做成動態的：

 var tipsContent = getTips(params.column.key, params.row[params.column.key]) 或 params.column.label

根據名稱做判斷，如果提示數據很多還可以寫入數據庫，根據名稱查詢數據庫。

iview 案例 https://www.cnblogs.com/hao-1234-1234/p/13301048.html

 

其它案例：

鏈接一：https://blog.csdn.net/izengjing/java/article/details/84290048

話不多說，直接上范例地址（已失效）  https://jsfiddle.net/8kv3umdL/

elementui 提供了一個render-head 方法，這個我試過了，不好使，不管怎樣，結構都是只顯示tooltip 的邊框，不顯示tooltip 的背景，查了很多資料，發現elementUI還有一個方法自定義表頭，自定義表頭里面提到使用Scoped slot 方法來重置表頭，最后，根據這個方法，解決了表頭添加tootip的問題

擴展，類似的方法還有很多，比如表頭添加圖標類，添加輸入框，添加選擇框的， 都可以使用這個方法

 

 

鏈接二：https://blog.csdn.net/HuangZeJunXXX/java/article/details/103762079

<el-table
empty-text=“正在加載中…”
:data=“contentList”
style=“width: 100%”
@sort-change=“sort”
class=“pro-table-item”
tooltip-effect=“dark”

<template v-for="(item,index) in titleList">
　　 <el-table-column
　　 v-if="index == '0'"
　　 :prop="index.toString()"
　　 :label="item"
　　 sortable="custom"
　　 min-width="120"
　　 :render-header="renderHeader"
　 　>
　　 </el-table-column>
<el-table-column
v-else
:prop="index.toString()"
　　 :label="item"
　　 min-width="120"
　　 :render-header="renderHeader"
　　 show-overflow-tooltip

　　
renderHeader(h, { column }) {
if(column.label.length>13) {
return (

{column.label}

)
} else {
return (
{column.label}
)
}
},
並不想讓所有的表頭都彈出tooltip，只想讓超出長度並且

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;