解决layui表格中单元格显示内容过长，鼠标移到上方显示全部内容

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

金宝_Tina

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

阅读量7.9k

点赞数 1

文章标签： layui html5 前端

本文链接：https://blog.csdn.net/qq_39080240/article/details/126361162

版权

在layui表格中，默认的长内容显示是通过点击单元格箭头弹出全览。但根据项目需求，实现了鼠标悬停在单元格上即显示全部内容的功能。主要步骤包括将单元格内容替换为input输入框，设置input的type为text，value为内容，title与value相同，width为100%，并利用text-overflow实现内容过多时的省略号效果。

摘要由CSDN通过智能技术生成

在layui表格中会设置每列的宽度，但是常常会遇到单元格显示内容太长而无法完全显示的情况。layui表格默认的方法是点击单元格最右侧的箭头，会弹出一个显示行显示全部内容，点击关闭按钮即关闭了这个弹出的显示行。

但是我在项目中遇到的问题是要求鼠标移动到显示内容上显示全部内容，而不是点击箭头弹出框显示全部内容，下面就是我实现的方法：

主要包括几个内容：

1.将单元格显示内容的dom节点用layui表格的模板换成input

2.设置input的type为text，value就是要显示的内容，

3.设置input的title的属性的值与value相同，即鼠标移动到内容上方显示全部的内容

4.设置input的宽度width：100%，这个宽度根据自己实际需要中修改，我需要的是适应input父元素的宽度

5.设置input的value显示内容过长时剩余内容显示为省略号...（样式需要，看起来美观些）

以下为代码：

layui.use('table', function(){
    var table = layui.table;
    table.render({
        elem: '#documentTable'
        ,id:'documentTab'
        ,data:dataList
        ,even: true 
        ,cols: [[
            ,{title:'序号', width:'4%',templet:function (res) {
                    return res.LAY_INDEX;
                }}

            ,{field:'BO_DOCUMENT_NAME', title:'类型', width:'17%',templet:function (res) {
                    return "<input type='text' value='" + res.BO_DOCUMENT_NAME + "' title='" + res.BO_DOCUMENT_NAME + "' " +
                        "style='width: 100%;border: none;background: transparent;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;'>";
                }}

            ,{field:'documentCategory', title:'单位', width:'10%',align:'center'}
        ]]
        ,done:function () {
            $('.layui-table tr td:nth-child(5)').css({'text-align':'left'});
        }
        ,page: true
        , limits: [10, 20, 30]
        , limit: 10,
    });

}