layui表格中缩略的内容点击弹出后不会消失

最新推荐文章于 2024-04-09 11:12:09 发布

原创最新推荐文章于 2024-04-09 11:12:09 发布 · 4.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui表格

学习笔记同时被 2 个专栏收录

64 篇文章

订阅专栏

笔记

59 篇文章

订阅专栏

本文介绍了解决表格中内容过长时，弹框显示全部内容后不消失的问题，提供了三种解决方案，包括禁用弹框、主动关闭弹框及修改源码实现自动关闭tip。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当表格中的内容太长缩略后，点击会弹出并显示全部，但是弹出之后切换分页或者点击左侧菜单切换页面，都不会消失。

在这里插入图片描述

解决方案一：

索性就让这个弹框不出现
添加样式

.layui-table-tips-main {
display: none;
}
.layui-table-tips-c {
display: none
}

这样点击弹框就不会显示全部，也就不会有这个问题

解决方案二：

直接在做其他操作的时候，关闭页面弹窗就行

layer.close(layer.index);
或者layer.closeAll()

解决方案三：（修改源码）

内容超出改为弹出tip
鼠标进入单元格时右侧不再显示按钮，直接弹出 tip，鼠标离开时自动关闭 tip

修改table.js，搜索

layui-table-grid-down

var ti;//保存tip的index
var g = "layui-table-grid-down",
    x = function(e) {
        var i = t(this),
        a = i.children(f);
    if (e && e == "hide"){
        l.close(ti);//关闭上一个tip
    }else if(a.prop("scrollWidth") > a.outerWidth()) {
        ti = l.tips(a.text(), i, {tips:1,time:0});
    }
//  if(e) i.find(".layui-table-grid-down").remove();
//  else if(a.prop("scrollWidth") > a.outerWidth()) {
//      if(a.find("." + g)[0]) return;
//	i.append('<div class="' + g + '"><i class="layui-icon layui-icon-down"></i></div>')
//  }
};