如何将 overflow-y 设置为 bootstrap-vue 表格单元格或行答案

【问题标题】：how to set overflow-y to bootstrap-vue table's cell or row如何将 overflow-y 设置为 bootstrap-vue 表格单元格或行
【发布时间】：2020-04-15 04:57:16
【问题描述】：

你好朋友，我正在使用 Bootstrap-vue 来显示我从数据库中查询的数据，我希望它显示像这样enter image description here

那我该怎么办。请告诉我你是否知道如何解决它，这是我的代码

 <b-table
        :items="search_transfer"
        :fields="columnsheader"
        :current-page="currentPage"
        :per-page="perPage"
        class="tbsearch"
    ></b-table>

这就是我得到的。 enter image description here

【问题讨论】：

你是不是用tbsearch类来控制overflow-y

标签： html css vue.js bootstrap-4 bootstrap-vue

【解决方案1】：

你好简单的解决方案是让它显示：inline-block;

添加下面的css

.tbsearch > tbody > tr > td:nth-child(4){
 height: 65px;
 overflow: auto;
 display: inline-block;
}

【讨论】：

【解决方案2】：

一般来说，表格单元格应用一些样式可能会很痛苦（由于它们默认为display: table-cell）

根据您的第一张图片，他们似乎在其单元格内容周围使用了一个包装器元素（基于可滚动区域外部周围的填充）。

使用自定义槽进行单元格渲染，并将您的内容包装在具有您的 overflow-y 类的 <div> 元素中：

<template>
  <b-table
    :items="search_transfer"
    :fields="columnsheader"
    :current-page="currentPage"
    :per-page="perPage"
  >
    <!--
      I am making an assumption that the field you want to scroll is `description`
    -->
    <template v-slot:cell(description)="scope">
      <div class="my-cell-overflow-y">
        {{ scope.value }}
      </div>
    </template>
  </b-table>
</template>

<style>
  .my-cell-overflow-y: {
    max-height: 2rem;
    overflow-y: auto
  }
</style>

有关自定义数据单元格渲染的详细信息，请参阅https://bootstrap-vue.js.org/docs/components/table#custom-data-rendering。

【讨论】：