layui数据表格自动换行解决办法

问题背景

不是所有的列表都是一行就搞定,如果遇到layui.table需要支持自动换行的情况,这个时候就需要改造layui的数据表格,支持自动换行。

想要实现的效果如下:(=.=原图找不到了,将就理解一下把)
单行 => 多行自动换行
在这里插入图片描述
改造完成效果(自动换行):
在这里插入图片描述

解决方案

核心代码/改造要点如下:

  1. 修改CSS样式,支持换行(*必须)。
<style>
    .layui-table-cell {
        line-height: 20px !important;
        vertical-align: middle;
        height: auto;
        overflow: visible;
        text-overflow: inherit;
        white-space: normal;
    }
</style>
  1. 增加对操作栏的高度转换,以便更好的显示(可选)。
done: function(res, curr, count){
    $(".layui-table-main tr").each(function (index, val) {
        $($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
        $($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
    });
}

layui.table.render代码示范:

//动态改变列宽大小
function changeWidth(width){
    if(screen.width<1367){
        return width/2;
    }else if(screen.width<1601){
        return width/1.5;
    }else{
        return width;
    }
}
 table.render({
            elem: '#currentTableId',
            method: 'post',
            url: '${request.contextPath}/tender/list',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {field: 'tenderName', minWidth: changeWidth(250),title: '名称', sort: true},
                {field: 'tenderDesc', minWidth: changeWidth(250),title: '预算金额(采购公告)/中标单位(中标公告)'},
                {field: 'source', title: '数据来源',minWidth:changeWidth(190),width:changeWidth(190)},
                {field: 'category', title: '分类',minWidth:changeWidth(100),width:changeWidth(100)},
                {field: 'tags', title: '标签',minWidth:changeWidth(100),width:changeWidth(100)},
                {title: '附件',minWidth:200,templet: function(d){
                    if(d.attachment!=null&&d.attachment!=""&&d.attachment!="[]"){
                        let att = "";
                        //修复attachment包含非法html符合导致报错问题
                        try{
                            let json = $.parseJSON(d.attachment);
                            for(let i = 0; i<json.length; i++){
                                att+=("<a target='_blank' href='"+renderHref(json[i].file)+"' ><i class='layui-icon layui-icon-download-circle'></i>"+json[i].name+"</a><br>");
                            }
                            return att;
                        }catch (e) {
                            console.log(e);
                            return "ERROR:包含非法HTML元素或JSON格式不正确";
                        }
                    }else{
                        return "";
                    }
                }},
                {field: 'createTime',minWidth:120,width:120, title: '发布时间'},
                {title: '链接',minWidth:60,width:60,templet: function(d){
                            return '<a target="view_window" href="'+d.url+'"><i class="layui-icon layui-icon-website"></i></a>';
                    }},
                {title: '状态',minWidth:100,width:100,templet: function(d){
                    if(d.status===2){
                        return '<i class="layui-icon layui-icon-ok-circle" style="color: #01AAED">分析</i>';
                    }else if(d.status===3){
                        return '<i class="layui-icon layui-icon-close-fill" style="color: #FF5722">异常</i>';
                    }else if(d.status===0){
                        return '<i class="layui-icon layui-icon-delete" style="color: #eeeeee">废弃</i>';
                    }else{
                        return '<i class="layui-icon layui-icon-release" style="color: #5FB878">抓取</i>';
                    }
                }},
                {title: '操作', minWidth: 60,width: 60, templet: '#currentTableBar',align: "center"}
            ]],
            limits: [20 , 50 , 100 , 200 , 500 , 1000],
            limit: 50,
            page: true,
            done: function(res, curr, count){
                $(".layui-table-main tr").each(function (index, val) {
                    $($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
                    $($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
                });
            }
        });

最终效果

Done !
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页