Bootstrap table表格信息过长显示省略，鼠标悬停显示详细信息

最新推荐文章于 2024-12-05 16:44:01 发布

原创

最新推荐文章于 2024-12-05 16:44:01 发布 · 1.3w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap-table #html #css #js

本文介绍了如何在Bootstrap table中处理文本过长的问题，通过设置cellStyle和formatter实现文本溢出隐藏，并在鼠标悬停时显示完整信息。通过定义`paramsMatter`和`formatTableUnit`两个方法，可以自定义单元格的样式和内容展示，避免了直接修改源码的复杂性。同时提到了在formatter中处理特殊字符可能导致的问题。

Bootstrap table文本太长溢出隐藏，鼠标停显示文本内容。

在这里插入图片描述
效果如上图所示。
首先想到的是html的title样式，是最常用的，但是无奈bootstrap table的html都是封装好的，想要修改源码不可能完全获取dom元素进行更改，这样改太过于麻烦且出错率比较高。所以我网上找了一些资料来实现这个功能。

1.在bootstrap table配置部分的columns里如下写：
在这里插入图片描述
columns: [
{
field : “region_total_name”,
title : ‘区域’,
cellStyle:formatTableUnit,
formatter :paramsMatter
}
]
2.定义方法：

//表格超出宽度鼠标悬停显示td内容
function paramsMatter(value,row,index, field) {
var span=document.createElement(‘span’);
span.setAttribute(‘title’,value);
span.innerHTML = v