时间戳

首页 > 解决方案 > Adam Lynch 的带有 CSS 网格的灵活数据表的问题

vue.js - Adam Lynch 的带有 CSS 网格的灵活数据表的问题

问题描述

我正在使用带有 CSS 网格代码的 Adam Lynch 的灵活数据表。这是一个非常整洁的项目。https://adamlynch.com/flexible-data-tables-with-css-grid。我对这个项目有几个问题。

  1. 我注意到，当我使用水平滚动条滚动到列的右侧时，我无法再调整任何列的大小。一段时间以来，我一直试图弄清楚如何解决此问题，但无济于事。

  2. 我注意到，如果我调整一列的大小，我可以在之后立即调整另一列的大小而没有问题。但是，如果我尝试连续两次调整同一列的大小，则无法第二次拖动分隔符。这个问题在 Firefox 中不存在，但在 Google Chrome 中确实存在。

标签： vue.jshtml-tableresizescrollbar

解决方案

好的。找到了答案。

对问题 #1 的回答... 需要将表格元素的溢出属性从默认值 'visible' 显式更改为 'auto' 或 'scroll'。

  overflow: scroll;
  display: grid;
  border-collapse: collapse;
  min-width: 100%;
  /* These are just initial values which are overriden using JavaScript when a column is resized */
  grid-template-columns: 
    minmax(150px, 1fr)
    minmax(150px, 1.67fr)
    minmax(150px, 1.67fr)
    minmax(150px, 1.67fr)
    minmax(150px, 3.33fr)
    minmax(150px, 1.67fr)
    minmax(150px, 3.33fr)
    minmax(150px, 1.67fr);
}

对问题 #2 的回答...需要阻止浏览器在 mousedown 事件上的默认行为。我将此代码移植到 Vuejs。在 Vuejs 中，语法是@mousedown.prevent="resizeInit"

推荐阅读