一、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>
)
}