我的方案:
<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用法啓發,但樣式這又不同)
其它案例:
鏈接一: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;