feat: 封装table hooks，table示例页面
parent
18fa67952a
commit
338d6dab44
@ -0,0 +1,34 @@
|
||||
// 根据角色动态生成路由
|
||||
import { defineFakeRoute } from 'vite-plugin-fake-server/client';
|
||||
import { faker } from '@faker-js/faker';
|
||||
|
||||
export default defineFakeRoute([
|
||||
{
|
||||
url: '/table/list',
|
||||
method: 'post',
|
||||
response: ({ body }) => {
|
||||
const list = [];
|
||||
for (let i = 0; i < body.psgeSize; i++) {
|
||||
list.push({
|
||||
id: faker.string.uuid(),
|
||||
avatar: faker.image.avatar(),
|
||||
birthday: faker.date.birthdate(),
|
||||
email: faker.internet.email(),
|
||||
firstName: faker.person.firstName(),
|
||||
lastName: faker.person.lastName(),
|
||||
sex: faker.person.sexType(),
|
||||
});
|
||||
}
|
||||
return {
|
||||
success: true,
|
||||
code: 200,
|
||||
data: {
|
||||
list,
|
||||
total: 77,
|
||||
pageSize: body.pageSize,
|
||||
pageNumber: body.pageNumber,
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
]);
|
||||
@ -0,0 +1,10 @@
|
||||
import { http } from '@/utils/http';
|
||||
|
||||
type Result = {
|
||||
success: boolean;
|
||||
data: Array<any>;
|
||||
};
|
||||
|
||||
export const getTableList = (params) => {
|
||||
return http.post<Result>('/table/list', { data: params });
|
||||
};
|
||||
@ -1,231 +1,134 @@
|
||||
<template>
|
||||
<base-container>
|
||||
<base-header>
|
||||
<el-card style="width: 100%"> 我是header </el-card>
|
||||
<el-card>
|
||||
<el-form
|
||||
:model="form"
|
||||
:inline="true"
|
||||
>
|
||||
<el-form-item label="姓名">
|
||||
<el-input
|
||||
v-model="form.firstName"
|
||||
placeholder="请输入姓名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称">
|
||||
<el-input
|
||||
v-model="form.lastName"
|
||||
placeholder="请输入名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="生日">
|
||||
<el-input
|
||||
v-model="form.birthday"
|
||||
placeholder="请输入生日"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱">
|
||||
<el-input
|
||||
v-model="form.email"
|
||||
placeholder="请输入邮箱"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="性别"
|
||||
praceholder="请选择性别"
|
||||
style="width: 150px"
|
||||
>
|
||||
<el-select v-model="form.sex">
|
||||
<el-option
|
||||
label="男"
|
||||
value="male"
|
||||
></el-option>
|
||||
<el-option
|
||||
label="女"
|
||||
value="female"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row justify="end">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleSearchFN"
|
||||
>查询</el-button
|
||||
>
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
class="mr-5"
|
||||
>新增</el-button
|
||||
>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</base-header>
|
||||
<pure-table
|
||||
border
|
||||
class="base-main"
|
||||
:data="tableData"
|
||||
:columns="columns"
|
||||
size="large"
|
||||
v-loading="loading"
|
||||
/>
|
||||
<base-footer>
|
||||
<el-card style="width: 100%"> 我是footer </el-card>
|
||||
<el-card>
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.currentPage"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
v-bind="pagination"
|
||||
@change="handlePaginationChangeFN"
|
||||
/>
|
||||
</el-card>
|
||||
</base-footer>
|
||||
</base-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { ref } from 'vue';
|
||||
import { useTable } from '@/hooks/useTable';
|
||||
import { getTableList } from '@/api/table';
|
||||
defineOptions({
|
||||
name: 'TemplateLayout',
|
||||
});
|
||||
const form = ref({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
birthday: '',
|
||||
email: '',
|
||||
sex: '',
|
||||
});
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
name: 'John',
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: 'Jane',
|
||||
age: 30,
|
||||
},
|
||||
{
|
||||
name: 'Bob',
|
||||
age: 28,
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: 'Jane',
|
||||
age: 30,
|
||||
},
|
||||
{
|
||||
name: 'Bob',
|
||||
age: 28,
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: 'Jane',
|
||||
age: 30,
|
||||
},
|
||||
{
|
||||
name: 'Bob',
|
||||
age: 28,
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: 'Jane',
|
||||
age: 30,
|
||||
},
|
||||
{
|
||||
name: 'Bob',
|
||||
age: 28,
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: 'Jane',
|
||||
age: 30,
|
||||
},
|
||||
{
|
||||
name: 'Bob',
|
||||
age: 28,
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: 'Jane',
|
||||
age: 30,
|
||||
},
|
||||
{
|
||||
name: 'Bob',
|
||||
age: 28,
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: 'Jane',
|
||||
age: 30,
|
||||
},
|
||||
{
|
||||
name: 'Bob',
|
||||
age: 28,
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: 'Jane',
|
||||
age: 30,
|
||||
},
|
||||
{
|
||||
name: 'Bob',
|
||||
age: 28,
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: 'Jane',
|
||||
age: 30,
|
||||
},
|
||||
{
|
||||
name: 'Bob',
|
||||
age: 28,
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: 'Jane',
|
||||
age: 30,
|
||||
},
|
||||
{
|
||||
name: 'Bob',
|
||||
age: 28,
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: 'Jane',
|
||||
age: 30,
|
||||
},
|
||||
{
|
||||
name: 'Bob',
|
||||
age: 28,
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: 'Jane',
|
||||
age: 30,
|
||||
},
|
||||
{
|
||||
name: 'Bob',
|
||||
age: 28,
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: 'Jane',
|
||||
age: 30,
|
||||
},
|
||||
{
|
||||
name: 'Bob',
|
||||
age: 28,
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: 'Jane',
|
||||
age: 30,
|
||||
},
|
||||
{
|
||||
name: 'Bob',
|
||||
age: 28,
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
age: 25,
|
||||
},
|
||||
{
|
||||
name: 'Jane',
|
||||
age: 30,
|
||||
},
|
||||
const columns = [
|
||||
{
|
||||
name: 'Bob',
|
||||
age: 28,
|
||||
label: '序号',
|
||||
type: 'index',
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
name: 'John',
|
||||
age: 25,
|
||||
label: '姓名',
|
||||
prop: 'firstName',
|
||||
},
|
||||
{
|
||||
name: 'Jane',
|
||||
age: 30,
|
||||
label: '名称',
|
||||
prop: 'lastName',
|
||||
},
|
||||
{
|
||||
name: 'Bob',
|
||||
age: 28,
|
||||
label: '生日',
|
||||
prop: 'birthday',
|
||||
},
|
||||
]);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
label: '姓名',
|
||||
prop: 'name',
|
||||
label: '邮箱',
|
||||
prop: 'email',
|
||||
},
|
||||
{
|
||||
label: '年龄',
|
||||
prop: 'age',
|
||||
label: '性别',
|
||||
prop: 'sex',
|
||||
},
|
||||
];
|
||||
const { loading, tableData, pagination, handleRequestDataFN, handleSearchFN, handlePaginationChangeFN, handleDeleteItemFN } = useTable({
|
||||
searchForm: form.value,
|
||||
requestDataFN: getTableList,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Loading…
Reference in New Issue