import React from 'react';
import { Table } from 'antd';
export default function TablePage() {
const columns = [
{
title: (
<div
style={{
position: 'relative',
}}
>
<div style={{ textAlign: 'right', marginLeft: 50 }}>日期</div>
<div style={{ textAlign: 'left' }}>设备</div>
<div
style={{
content: '',
position: 'absolute',
width: '1px',
height: '140px',
top: '-48px',
left: '42px',
backgroundColor: '#e8e8e8',
display: 'block',
transform: 'rotate(-57deg)',
}}
></div>
</div>
),
key: 'order',
width: 120,
fixed: 'left',
render: (_, row, inedx) => <span>{inedx}</span>,
},
{
title: '区域名称',
dataIndex: 'area_name',
},
{
title: '区域类型',
dataIndex: 'area_type',
},
];
const data = [];
for (let i = 0; i < 5; i++) {
data.push({
area_name: `区域名称${i}`,
area_type: `区域类型${i}`,
});
}
return (
<div style={{ height: '400px' }}>
<Table
rowKey="area_name"
columns={columns}
dataSource={data}
pagination={{ total: 100 }}
/>
</div>
);
}
React + antd斜线表格
最新推荐文章于 2024-10-28 16:26:10 发布
该文章展示了一个React组件,该组件利用antd库中的Table组件来创建一个包含日期、设备和区域信息的表格。表格有固定列和自定义渲染的行索引,数据是动态生成的,并且设置了分页功能,总数据量为100条。
摘要由CSDN通过智能技术生成