Umi & Ant Design 的Table组件合并单元格及去掉某一列的竖线实现

今天接到一个需求,表格要改成这种的:

环比分为两列,表头居中对齐,下面单元格右对齐,而且中间的线要去掉。

table.png Umi & Ant Design 的Table组件合并单元格及去掉某一列的竖线实现 经验总结

这样就需要用到合并单元格,然后通过样式把边线去掉,这里的根据数值设置字体颜色可以用 render 属性,可以参考:React & Ant Design Table组件自定义单元格文字颜色

Ant Design Table 表格组件合并单元格:

这里需要用到 colSpan 属性:表头列合并,设置为 0 时,不渲染。

第一列设置为 n ,如果是合并两列,就是 2 ,第二列设置为 0 ,就可以了。

const columns = [
  {
    title: '环比',
    colSpan: 2,
    dataIndex: 'lastMonth',
    align: 'center',
    className: 'noRightBorder',
    width: '8%',
    render: (value: string) => textControl(value),
  },
  {
    title: '环比',
    colSpan: 0,
    dataIndex: 'ratio',
    align: 'center',
    className: 'noLeftBorder',
    width: '8%',
    render: (value: string | number, row: any, index: number, align?: any) =>
      ratioControl(value, row, index),
  }
];

Ant Design Table 表格组件隐藏某一列的竖线(border):

columns 有一个 className 属性:可以单独定义每一列的样式类名。

这里给第一列一个 noRightBorder ,给第二列一个 noLeftBorder 类名。

然后在 CSS 中覆盖原始样式:注意,这里我只是举例,具体实际项目为准,下面是 *.less 代码:

.ant-table-cell {
  &.noLeftBorder {
    border-left: none !important;
  }
  &.noRightBorder {
    border-right: none !important;
  }
}

这样就可以实现图中的效果了。

未经允许不得转载:前端资源网 - w3h5 » Umi & Ant Design 的Table组件合并单元格及去掉某一列的竖线实现

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)