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

一、Element Plus

封装代码：

<template>
  <el-table ref="multipleTableRef" :data="searchParams.values" style="width: 100%"
    @selection-change="handleSelectionChange" border>
    <el-table-column type="selection" width="55" />
    <el-table-column v-for="item in column" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width">

    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="pagination">
    <el-pagination v-model:currentPage="searchParams.pagenum" v-model:page-size="searchParams.pagesize"
      :page-sizes="[1, 3, 5, 10]" layout="total, sizes, prev, pager, next" :total="total" @size-change="searchList"
      @current-change="searchList" />
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, toRaw } from 'vue'
import { ElTable } from 'element-plus'
import moment from 'moment'
interface User {
  date: string
  name: string
  address: string
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const props = defineProps(['tableData', 'column'])
const emits = defineEmits(['selectChange',])
const searchParams = reactive({/*分页的参数 */
  query: "",
  pagesize: 5,
  pagenum: 1,
  values: []
})
const total = ref(0)/* 总数 */
const tableRef = ref()
onMounted(() => {
  searchList()
})
/* 分页的逻辑 */
const searchList = () => {
  let results = toRaw(props.tableData)
  console.log(results);
  // 使用正则表达式进行模糊查询
  const searchTerm = searchParams.query;
  const regex = new RegExp(searchTerm, "gi");
  searchParams.values = results.filter((item) => regex.test(item.username));
  let len = searchParams.values.length;
  let num = len - searchParams.pagesize;
  // // 获取到的数组长度大于页面展示的长度
  if (num > 0 && searchParams.pagenum === 1) {
    console.log("展示首页内容！");
    searchParams.values.splice(searchParams.pagenum, num);
  } else if (num > 0 && searchParams.pagenum !== 1) {
    console.log("展示后面的内容！");
    console.log(
      "前面要删除的数目：" +
      (searchParams.pagenum - 1) * searchParams.pagesize
    );
    searchParams.values.splice(
      0,
      (searchParams.pagenum - 1) * searchParams.pagesize
    );
    // 二次截断
    let len2 = searchParams.values.length;
    searchParams.values.splice(
      searchParams.pagesize,
      len2 - searchParams.pagesize
    );
  }
  total.value = len;
};
/* 多选框选中 */
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
  emits('selectChange', val)
}
</script>

<style scoped>
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.handle {
  color: #0279fe;
  margin-right: 6px;
}

.handle:hover {
  cursor: pointer;
}
</style>

使用：

<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span>数据列表</span>
      </div>
    </template>
    <baseTable v-if="tableData.length !== 0" :tableData="tableData" :column="column" @selectChange="handleSelectionChange">
    </baseTable>
  </el-card>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import baseTable from '../../../../components/basTable1.vue'
import axios from 'axios'
const tableData = ref([])//表格数据
onMounted(() => {
  getTableData()
})
/* 表头 */
const column = reactive([
  {
    label: '公司名称',
    prop: 'corporation',
  },
  {
    label: '管理地区',
    prop: 'region',
    width: 200
  },
  {
    label: '所在地区',
    prop: 'nowregion',
  },
  {
    label: '地址',
    prop: 'address',
  },
  {
    label: '级别',
    prop: 'roleId',
  },
  {
    label: '账户姓名',
    prop: 'username',
  },
  {
    label: '注册手机号',
    prop: 'phone',
  },
  {
    label: '账户姓名',
    prop: 'username',
  },
  {
    label: '创建时间',
    prop: "createTime",
    width: 200
  },
  {
    label: '状态',
    prop: 'roleState',
  },
  {
    label: '操作',
    prop: 'handle',
    btn: ['赋权', '编辑', '开通', '禁用', '删除'],
    width: 200
  },
])
/* 获取表格数据 */
const getTableData = async () => {
  try {
    let data = await axios.get("Yourpath")
    tableData.value = data.data.results
  } 
  catch (err) {
    console.log(err);
  }
}
/* 多选框选中的内容 */
const handleSelectionChange = (val) => {
  console.log(JSON.parse(JSON.stringify(val)));
}
</script>
<style lang="scss" scoped></style>

二、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 (
    <Table
      columns={columns}
      dataSource={data}
      pagination={{
        current: pagination.current,
        pageSize: pagination.pageSize,
        showSizeChanger: true,
        pageSizeOptions: ['1','3', '5', '10'],
        showTotal: (total) => `一共 ${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) => <a>{text}</a>,
    },
    {
      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 color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a>Invite {record.name}</a>
          <a>Delete</a>
        </Space>
      ),
    },
  ]
  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 (
    <div>
      <BaseTable columns={columns} data={data}/>
    </div>
  )
}