3

我对表格响应类有一些问题，因为它在 css 上未指示时会在 y 轴上生成滚动。

这是问题的图片，文本我也复制了错误

<div id="app">
  <div class="container">
    <div class="table-responsive">
       <table class="table table-bordered">
        <thead>
          <tr>
            <th>N°</th>
            <th>Test</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>
              <multiselect 
                v-model="value" 
                :options="options"
                :multiple="true"
                track-by="library"
                :custom-label="customLabel"
                >
              </multiselect>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

https://jsfiddle.net/ggalvez92/3d8h4sqy/

我试图把 overflow-y: visible 但似乎没有任何效果。

如果有人可以帮助我修复它，我将不胜感激。

4

1 回答 1

3

如果我们改变：

.multiselect__content-wrapper { display: contents; }

它可以在表格单元格内生长，但会影响表格高度。

或者，如果您使用：

.table-responsive { overflow: unset; }

它可以在单元格外部生长，而不会影响表格高度。

因此，要修复表格单元格外的下拉列表并保持溢出，.table-responsive我不相信这只能修复 CSS。JavaScript 解决方案已报告给：

  • 添加一些底部填充（仅当下拉列表位于最后一行时适用）
  • 将下拉列表附加到正文并重新计算偏移量
  • position: fixed打开时添加，重新计算width，偏移leftright

因此，在与 Vue（第一次）进行了一番斗争之后，我找到了一个可能适合您需求的解决方案。该解决方案使用position: fixed前面提到的。

repositionDropdown (id){
    const el = document.getElementById(id);
    const parent = el.closest('.multiselect');
    const content = parent.querySelector('.multiselect__content-wrapper');
    const { top, height, left } = parent.getBoundingClientRect();

    content.style.width = `${parent.clientWidth}px`;
    content.style.position = 'fixed';
    content.style.bottom = 'auto';
    content.style.top = `${top + height}px`;
    content.style.left = `${left}px`;
}

通过将@open事件添加到设置中，它还需要一个:id. 出于某种原因，这个 id 需要是数字的，我现在不知道为什么。它可能需要一些额外的微调，但至少它解决了一个更大的问题。

演示

于 2020-05-01T01:16:48.077 回答