ElementUI table 表头 标题 添加 悬浮提示 tooltip

时间：2024-04-15 17:31:38

我的方案：

    
            <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.****.net/izengjing/java/article/details/84290048

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

elementui 提供了一个render-head 方法，这个我试过了，不好使，不管怎样，结构都是只显示tooltip 的边框，不显示tooltip 的背景，查了很多资料，发现elementUI还有一个方法自定义表头，自定义表头里面提到使用Scoped slot 方法来重置表头，最后，根据这个方法，解决了表头添加tootip的问题

扩展，类似的方法还有很多，比如表头添加图标类，添加输入框，添加选择框的， 都可以使用这个方法

 

 

链接二：https://blog.****.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;



相关文章