layui数据表格内容中自动换行以及添加br换行，操作栏样式错乱

layui前端框架，相信小伙伴们都很熟悉，毕竟是框架嘛，有些情况就是自己来操作啦，对不对，

比如这个场景：

我想在订单状态已栏显示更多内容，含有<br />换行。但是正常情况下，即使是添加了换行，也是不显示出来了，因为数据表格没有自动换行。所以这个时候 ，我们就先来添加一波CSS来使其自动换行。

.layui-table-cell {
    /*line-height: 17px !important;*/ //可根据自己的样式来修改
    vertical-align: middle;
    height: auto;
    overflow: visible;
    text-overflow: inherit;
    white-space: normal;
}

但是小伙伴们在添加了这段CSS之后，是达到了自动换行的效果了，但是也导致了其他的内容：

如上图所示，操作一栏的样式没有跟着数据表格的样式改变，这就头疼了呀，毕竟这部分操作是引用的 script，但是道高一尺，魔高一丈，必然能处理的嘛

在table.render({})中添加

          ,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());
            })
          }

参考：

table.render({
          elem: '#test-table-reload'
          ,url: '$crmOrderApi' + 'api-order/order-lists?type=N&access-token=' + '$accessToken'
          ,method:'post'
          ,cols: [[
              { type: 'numbers', title: '序号' },
              {field:'number',title:'单号',minWidth:200,templet:function(res) {
                  if (todayDate() == res.addTime){
                      return res.number+'<img src="/image/new.gif" alt="layui数据表格内容中自动换行以及添加br换行，操作栏样式错乱">';
                  } 
                  return res.number;
              }},
              {field:'sub_type_name',title:'订单类别',minWidth:100},
              {field:'last_at',title:'上次更新',minWidth:100,"unresize":true},
              {field:'keywords',title:'关键词',minWidth:120},
              {field:'name',title:'客户姓名',minWidth:120},
              {field:'mob',title:'手机号',minWidth:130},
              {field:'ht_costs',title:'合同额',minWidth:100,templet:function(res) {
                return '<p style="color:red">'+formatMoney(res.ht_costs,2,"￥")+'</p>';
              }},
              {field:'lw_ncjbfx',title:'期刊名称',width:200},
              {field:'service2_id',title:'售后客服',minWidth:100},
              {field:'serve3_mid',title:'学术支持',minWidth:100},
              {field:'status',title:'订单状态',width:200,templet: function(res){
                  var orderStatus =  statusTemplet(res.status);
                  var steps = '';
                  if (res.status == 2){
                      steps += '<br>' + assessSteps(res.eType) + '<br />[' + res.eResult + ']';
                  } 
                  return '<span style="color:red">'+orderStatus+steps + '</span>';
              }},
              {field:'jd_status',title:'进度状态',minWidth:100,templet: function(res){return jdstatusTemplet(res.jd_status);}},
              {field:'serve1_mid',title:'售前客服',minWidth:100},
              {field:'not_pass_remark',title:'审核备注',width:200},
              {field:'fb_time',title:'合同录用时间',minWidth:120},
              {fixed:"right", title:'操作', toolbar: "#barDemo",width:150}
              
          ]]
          ,page: true
          ,done: function(res, curr, count){
            $("#count").text(res.count);
            $("#amount").text(formatMoney(res.amount,2,"￥"));
            $(".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());
            })
          }
          ,limits:[10,2050,80,100]
          ,limit:10
        });

添加完毕之后让我们来看看效果：