vue和佈局遇到的問題

1. 顯示豎直方向的滾動條
   第一種固定高度+overflow-y: auto;
   展示如下：

<div class="card" style="width: 100%;margin:0 auto;    height: 280px;overflow-y: auto;">
     <ul class="list-group list-group-flush" v-for="detail in detailList" 
     :key="detail.criteria_id" >
         <li class="list-group-item" v-if="detail.hierarchy_id==item.id">
             <p>{{detail.name}}：<span>{{detail.h_r_score}}%<span></p>
         </li>
     </ul>
</div>

第二種，使用基於bootstrap4的tabler插件庫中的類.o-auto{overflow:auto!important}

官網學習文檔：Tabler
該文檔給我感覺建設的不是很完善，只有樣式而且還在不斷填充中，你要查找樣式就看人家給提供的官方樣式就查看代碼就能使用。
官網樣式展示：

我的代碼中使用：

<div class="col-6" v-for="(item, index) in list" :key="item.id" >
  <div class="card">
        <div class="card-status card-status-top" :class="colorList(index)"></div>
        <div class="card-header">
          <div class="card-title">{{item.name}}</div>
          <div class="card-options">{{item.score}}(分)</div>
        </div>
        <#--  o-auto是bootstrap4中的控制類名  -->
        <div class="card-body o-auto" style="height:15rem;">
        <ul class="list-group list-group-flush" 
	        v-for="detail in detailList" 
	        :key="detail.criteria_id" >
          <li class="list-group-item" v-if="detail.hierarchy_id==item.id">
            <p>{{detail.name}}：<span>{{detail.h_r_score}}%<span></p>
          </li>
        </ul>
        </div>
      </div>
    </div>
</div>

2. style="white-space:pre-wrap;"這個是css的樣式，對應的有幾個值
   white-space
   
   這裏也引入了其他插件庫中結合該css特點froala Editor
   官方文檔：Froala Editor

3. 我想根據不同的分數顯示不同的顏色，vue裏兩個值的判斷可以直接使用三目運算符

<div class="p-3 mb-2  text-white" 
:class="item.score>90?'bg-primary':'bg-danger'"> </div>

①三個值的判斷同樣也能使用三目運算符

<div class="p-3 mb-2  text-white" 
:class="item.score>90?'bg-primary':(item.score>60?'bg-secondary':'bg-danger')">
</div>

②判斷數值多少，然後對不同的數值給予不同操作，可以使用vue中的計算屬性computed

data: {
        <#--  list: ${sqlt.jsonQueryForList("hierarchy_result.queryHierarchyResultList",
        {"user_id":loginUser.id!0})!?no_esc},  -->
        list: [],
      },
computed: {
  newList() {
    let l = []
    for (let obj of this.list) {
      let colorClass = 'bg-danger'
      if (obj.score >= 90)
        colorClass = 'bg-primary'
      else if (obj.score >= 60)
        colorClass = 'bg-secondary'
      obj.colorClass = colorClass
      l.push(obj)
    }
    return l
  },
}
      
<div class="row  "  id="list">
    <div class="col-4 " v-for="item in newList" :key="item.id" >
       <table class="table card-table table-vcenter table-hover text-center">
           <tr class>
              <td>{{item.name}}</td>
              <td style="white-space:pre-wrap;" class="text-center">{{item.score}}(分)</td>
            </tr>
        </table>
	<div class="card" style="width: 100%;   height: 280px;overflow-y: auto;">
         <ul class="list-group list-group-flush" 
	         v-for="detail in detailList" 
	         :key="detail.criteria_id" >
             <li class="list-group-item" v-if="detail.hierarchy_id==item.id">
                <p>{{detail.name}}：<span>{{detail.h_r_score}}%<span></p>
             </li>
          </ul>
     </div>
   </div>
  </div>
  <div class="text-center text-muted card-footer" v-if="list.length == 0">暫無數據。</div>
</div>

• let l = []是相當於把data中的list數據列表取出，把colorClass的類名放到l中，返回的就是l這個數組。現在就是不對list操作而是計算屬性中newList進行操作
  
  ③使用計算屬性但是不修改原數組，返回的 就是要添加的class

data: {
        <#--  list: ${sqlt.jsonQueryForList("hierarchy_result.queryHierarchyResultList",
        {"user_id":loginUser.id!0})!?no_esc},  -->
        list: [],
      },
computed: {
     colorList() {
       return function(idx) {
         return this.list[idx].score >=90 ? 'bg-success' 
         : (this.list[idx].score >=60 ? 'bg-primary' : 'bg-danger')
       }
     }
   },
    <div class="row"  id="list">
    <div class="col-6" v-for="(item, index) in list" :key="item.id" >
      <div class="card">
        <div class="card-status card-status-top" :class="colorList(index)"></div>
        <div class="card-header">
          <div class="card-title">{{item.name}}</div>
          <div class="card-options">{{item.score}}(分)</div>
        </div>
        <#--  o-auto是bootstrap4中的控制類名  -->
        <div class="card-body o-auto" style="height:15rem;">
        <ul class="list-group list-group-flush" 
	        v-for="detail in detailList" 
	        :key="detail.criteria_id" >
          <li class="list-group-item" v-if="detail.hierarchy_id==item.id">
            <p>{{detail.name}}：<span>{{detail.h_r_score}}%<span></p>
          </li>
        </ul>
        </div>
      </div>
    </div>
  </div>

• 注意這種寫法需要傳入參數index也就是索引的位置