【紧贴业务，拿来即用】表格同时存在居左、居右列很难看，你们觉得呢

起因

• 正在沉浸摸鱼快乐的我，突然桌面灰色头像在跳动；我不以为然地打开一看，不料是UI大大发来一个截图，如下

• 我仔细一看，这是因为居左、局右列同时存在呀，我说：你把所有列都统一居左就好了呀

• 她说：之前是统一居左的，但是数字列为了方便用户纵向比较，居右会更易读

• 我虽然不想弄，但是。。。。。

  

需求

1. 局左、居右列的间距小些
2. 居右、居左列的间距大些
3. 窗口变化时，这些间距也需要有些变化

解决思路

• 由于平台已经存在大量表格页面，改动不宜太大
• 需求1、2只需要在居右列的右侧想办法弄个占空间的 dom 即可
• 窗口变化，间距变化，基于媒体查询实现

具体实现

生成 dom（占空间的）

• 采用伪元素进行设置 width 作为一个假间距
• 最后一个居右列相对于其他居右列 width 不需要那么大

@mixin colRightMixin($spacing, $content) {
  .right-column.el-table__cell.is-right {
    // 在居右列中占用部分宽度作为间隙使用
    .cell {
      &::after {
        content: '';
        display: inline-block;
        width: $spacing;
        min-width: 5%;
      }
    }
    // 最后一个右列间隙宽度减少
    &.last-right-column {
      .cell {
        &::after {
          @if $spacing == 0 {
            width: $spacing;
          } @else {
            width: $spacing - 10;
          }
          // min-width: 0;
        }
      }
    }
  }
}

窗口变化，间距变化

• 采用预设不同分辨率下对应的 width 值

@include colRightMixin(50%, 50%);
// 在小于或等于 1800px 的屏幕上
@each $maxWidth, $spacing, $content in (1800px, 40%, 60%), (1600px, 30%, 70%), (1450px, 20%, 80%), (1350px, 10%, 90%), (1260px, 0, 100%) {
  @media screen and (max-width: $maxWidth) {
    @include colRightMixin($spacing, $content);
  }
}

已有页面尽可能小改动（此部分在 demo 中未体现）

由于当前项目对 el-table 进行了一层组件封装，我会在组件内对 align="right" 的列设置 className="right-column"，并且基于相应数据判断出最后一列，设置 className="right-column last-right-column"，达到外层业务组件不需要修改的目的

体验

• 运行效果以及代码如下
  • demo
    • 已增加掘友 Marshtomp 提供的思路，使用 padding-right 实现此功能
  • 源码

最后

如果对你开发某些功能有所帮助，麻烦多点赞评论收藏😊

如果对你实现某类业务有所启发，麻烦多点赞评论收藏😊

如果...，麻烦多点赞评论收藏😊

如果大家有其他的方案，欢迎留言交流哦！