Element Plus& Ant Design(react) 表格的分页封装

一、Element Plus

封装代码:





使用:




二、Ant Design

封装代码:

import React, { useState } from 'react';
import { Space, Table, Tag } from 'antd';

const App = ({columns,data}) => {
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 3,
  });

  const handleTableChange = (pagination) => {
    setPagination(pagination);
  };

  return (
     `一共 ${total} 条`,
        onChange: (page, pageSize) => handleTableChange({ current: page, pageSize }),
        onShowSizeChange: (current, size) => handleTableChange({ current, pageSize: size }),
      }}
    />
  );
};

export default App;

使用:

import React from 'react'
import BaseTable from '../../../component/baseTable'
import { Space, Tag } from 'antd';
export default function UserData() {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (text) => {text},
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: 'Tags',
      key: 'tags',
      dataIndex: 'tags',
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? 'geekblue' : 'green';
            if (tag === 'loser') {
              color = 'volcano';
            }
            return (
              
                {tag.toUpperCase()}
              
            );
          })}
        
      ),
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        
          Invite {record.name}
          Delete
        
      ),
    },
  ]
  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sydney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];
  return (
    
) }

你可能感兴趣的:(react.js,vue.js,editplus,Ant,Design)