Skip to content

GitLab

Closed
Created by zhoudanjie@zhoudanjieDeveloper

使用V2Table和ant Table时，不设置纵向滚动scroll.y引起的样式问题

问题

UI校稿时反馈，某个V2Table组件展示时，单元格的竖直分割线颜色很淡，不像其他页面中那样清晰。

原因

页面中使用V2Table时，没有设置scroll属性，使用了V2Table中scroll默认值{ x: 'max-content' }，没有设置y，最终将这个scroll传给ant的Table组件。

逐步确认浏览器中元素结构后发现，与设置了scroll.y的情况相比，Table的dom结构已经发生了变化。

没有设置scroll属性时，.ant-table-container 下只有 .ant-table-content，其下包了一个table元素

<div class="ant-table”>
  <div class="ant-table-container”>
    <div class="ant-table-content”>
      <table>
        <thead class="ant-table-thead”>。。。</thead>
        <tbody class="ant-table-tbody”>。。。</tbody>
      </table>
    </div>
  </div>
</div>

设置scroll属性后，.ant-table-container 下有 .ant-table-header和.ant-table-body，其下分别包了一个table元素

<div class="ant-table”>
  <div class="ant-table-container”>
    <div class="ant-table-header”>
      <table>
        <colgroup>。。。</colgroup>
        <thead class="ant-table-thead”>。。。</thead>
      </table>
     </div>
     <div class="ant-table-body”>
      <table>
        <colgroup>。。。</colgroup> 
        <tbody class="ant-table-tbody”>。。。</tbody>
      </table>
    </div>
  </div>
</div>

我们项目的一些共通样式是针对.@{ant}-table-body 等class设置的，因此不设置scroll.y时某些class不存在, 一些样式设置自然无法生效。

比如

  .@{ant}-table-body {}
      .@{ant}-table-container {
        .@{ant}-table-body {
          table {
            tbody {
              tr {
                td {
                  border-right: 1px solid #eee;
                }
                .@{ant}-table-cell-fix-right-first {
                  &::after {
                    border-right-color: #eee;
                  }
                }
              }
            }
          }
        }

总结

  1. 使用V2Table或直接使用ant Table时，设置与不设置纵向滚动scroll.y，table内部的dom结构是有差别的。

  2. 使用V2Table或直接使用ant Table时，尽量设置纵向滚动scroll.y，否则会因为特定class的结构不存在，Table部分共通style设置无法生效。

Edited by zhoudanjie