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也就是索引的位置