Umi & Ant Design 的Table组件合并单元格及去掉某一列的竖线实现
Umi & Ant Design 的Table组件合并单元格及去掉某一列的竖线实现
德顺
发布于 2021-12-09 19:03:49
发布于 2021-12-09 19:03:49
今天接到一个需求，表格要改成这种的：
环比分为两列，表头居中对齐，下面单元格右对齐，而且中间的线要去掉。
这样就需要用到合并单元格，然后通过样式把边线去掉，这里的根据数值设置字体颜色可以用 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组件合并单元格及去掉某一列的竖线实现
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录