【问题标题】: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 类的 &lt;div&gt; 元素中:

    <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

    【讨论】:

      猜你喜欢
      • 2012-06-14
      • 1970-01-01
      • 1970-01-01
      • 2019-01-01
      • 1970-01-01
      • 2014-03-22
      • 1970-01-01
      • 2013-05-31
      • 1970-01-01
      相关资源
      最近更新 更多