layui table 单元格内文字、元素块实现优美的换行显示

关于layui table 单元格内内容的换行显示，包括文字、元素块等。网上也提供了一些解决方案，博主也尝试过这些解决方法，但都不尽善美。于是决定好好研究一下这里面的样式问题。

一、网上现有的解决方法：

1、更改单元格的样式

.layui-table-cell{
        height: auto;
        overflow:visible;
        text-overflow:inherit;
        white-space:normal;
}

此法简单粗暴，确实可以换行，但行间距较大，且文字全部换行，如果内容过多，会导致表格行高超大，美观性大大降低。如下：

2、在templet中使用<br>标签换行，并搭配设置单元格高度样式为height: auto;

此种方法对于换行元素块（例如上图中的证据列的换行）可实现需求，但缺点仍然是元素块之间的行间距过大，效果类似上图的文字间距，很不美观。

二、还算美观的解决方式

最终效果如下，认可这种效果的可继续往下阅读：

其中工作内容列对应文字的换行解决方式，文字过多，可通过滚轮单元格内下拉。
证据列对应元素块的换行。

1、统一的设置（单元格高度的自动，必不可少）

.layui-table-cell {
   	height: auto!important;
}

2、文字的换行
这里巧用templet，在templet中使用<textarea>标签，再设置文本域的样式（背景透明，边框为0px）来达到目的。

{
    title : "工作内容",
    field : "workContent",
    width : 290,
    align : "center",
    event : "",
    templet : function (d) {
        return '<textarea class="layui-textarea" style="margin: 10px 0px;background-color: transparent;border: 0px;">'+d.workContent+'</textarea>';
    },
}

3、元素块的换行
这里不使用<br>换行，改为使用盒子模型的方式来调整单元格内元素块的样式，可避免<br>带来的行间距过大。

{
    title : "证据",
    field : "",
    width : 190,
    align : "center",
    event : "",
    templet : function (d) {
        let html = '<div style="display: flex;flex-direction: column">';
        html += '<div style="display: flex;justify-content: center">';
        html += '<button class="layui-btn" style="font-size: 14px;background-color:transparent;color:rgba(77, 161, 255, 1);border-color:transparent;width:80px;line-height:30px;height:30px;"><i class="layui-icon layui-icon-upload"></i>上传</button>';
        html += '</div>';
        html += '<div style="display: flex;justify-content:center;height: 30px;line-height: 30px">';
        html += '<label class="layui-form-label" style="background-color:transparent;cursor: pointer;color:#4da1ff;text-align:left;width:auto;line-height:30px;text-align-last:left;height:30px;" >你的文字</label>';
        html += '<i class="layui-icon" style="margin-top: 1px;width:16px;height:17px;margin-left:15px;color:#cecece;">ဇ</i>';
        html += '</div>';
        html += '</div>';
        return html;
    },
}

总结：
其实，解决方法也是通过修改样式实现，大家可细看下元素块的样式部分。但解决文字的换行，使用现成的文本域标签，还是很方便的。有问题可留言。