一、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: stringname: stringaddress: 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 = valemits('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 (<Tablecolumns={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>)
}
