Laravel Blade中如何根据数据库动态列值设置进度条宽度

问题根因 #

你当前代码无法正确设置动态宽度的原因是style属性中的宽度值缺少百分比单位，浏览器无法将纯数值识别为宽度比例，补全单位即可实现每行基于SHAP_abs列值动态渲染进度条宽度。

修正后的Blade代码 #

<tr>
    <td class="col-md-4">
        {{ $row }}
    </td>
    @foreach($Correlations_list as $corr)
        @if($corr->Variable == $row )
            <td class="col-md-4">
                <div class="progress-bar progress-bar-striped active" 
                     role="progressbar" 
                     aria-valuenow="{{ $corr->SHAP_abs }}" 
                     aria-valuemin="0" 
                     aria-valuemax="100" 
                     style="width:{{ $corr->SHAP_abs*100 }}%">
                </div>   
            </td>
        @endif
    @endforeach
</tr>
@endif
@endforeach

可选优化方案 #

• 数值范围兜底：如果你的SHAP_abs可能出现小于0或者大于1的异常值，可以增加范围限制避免进度条溢出：

  style="width:{{ min(max($corr->SHAP_abs, 0), 1) * 100 }}%"
  

• 降低循环开销：当前每行都要遍历整个$Correlations_list匹配变量，数据量大时性能较低，可以在控制器中提前把关联数据转成键值对集合：
  控制器代码：

  $correlationsMap = $Correlations_list->keyBy('Variable');
  

  优化后的Blade代码可以省去内层循环：

  <tr>
      <td class="col-md-4">
          {{ $row }}
      </td>
      @if(isset($correlationsMap[$row]))
          @php $corr = $correlationsMap[$row] @endphp
          <td class="col-md-4">
              <div class="progress-bar progress-bar-striped active" 
                   role="progressbar" 
                   aria-valuenow="{{ $corr->SHAP_abs }}" 
                   aria-valuemin="0" 
                   aria-valuemax="100" 
                   style="width:{{ min(max($corr->SHAP_abs, 0), 1) * 100 }}%">
              </div>   
          </td>
      @endif
  </tr>
  

内容的提问来源于stack exchange，提问作者prashant