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组件合并单元格及去掉某一列的竖线实现