前言

最近又做回写管理后台的工作，冷不丁接触那些琐碎的表格表单啥的还有点不适应。遇到在antd表格中实现斜线表头的小需求，经过抓耳挠腮的寻找和简单思考后解决了。简单记录下。

代码展示

使用vite快速创建react项目

npx create-vite

安装antd，其它组件库也可以，大同小异

npm i antd

启动项目

npm run dev

实现代码

import React from 'react';
import { Space, Table } from 'antd';
const columns = [
    ...
    {
        title: () => {
            return <>
                <span className='top'>top</span>
                <span className='bottom'>bottom</span>
            </>
        },
        // 如果整列都显示为斜线，换成这个。只表头列显示，换成下面的
        className:'bias',
        onHeaderCell: () => ({
            // 也可以用className
            style: {
                background: '#fafafa url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=) no-repeat 100% center'
            }
        })
    },
    ...
];
const App = () => <Table columns={columns} dataSource={data} bordered={true} />;
export default App;

主要代码在使用svg为背景图，将base64解码后： <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width="1"/></svg>
在线加解密

MDN解释和示例 需要修改颜色，改变strok属性；修改宽度，改变stroke-width属性。而且不受表格配置width属性影响，都可以自适应。

antd表格实现斜线表头

前言

代码展示