React + antd斜线表格

最新推荐文章于 2024-10-28 16:26:10 发布

是小李啊

最新推荐文章于 2024-10-28 16:26:10 发布

阅读量187

点赞数

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/lj971005/article/details/128716399

版权

该文章展示了一个React组件，该组件利用antd库中的Table组件来创建一个包含日期、设备和区域信息的表格。表格有固定列和自定义渲染的行索引，数据是动态生成的，并且设置了分页功能，总数据量为100条。

摘要由CSDN通过智能技术生成

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>
  );
}