vue3.2/Vite/Ts76: 用户管理展示已有数据
·
Yin灏
目录结构
└─src
├─api
│ └─acl
│ └─user
│ ├─index.ts
│ └─type.ts
└─views
└─acl
└─user
└─index.vue
展示用户管理数据
src/views/acl/user/index.vue
<template>
<el-card>
<el-form :inline="true" class="form">
<el-form-item label="用户名">
<el-input palceholder="输入搜索的用户名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primay">搜索</el-button>
<el-button type="primay">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card>
<el-button type="primay">添加用户</el-button>
<el-button type="primay">批量删除</el-button>
<el-table border :data="userArr">
<el-table-column type="selection" align="center"></el-table-column>
<el-table-column type="index" label="#" align="center"></el-table-column>
<el-table-column label="id" align="center" prop="id"></el-table-column>
<el-table-column
label="用户名字"
align="center"
prop="username"
></el-table-column>
<el-table-column
label="用户名称"
align="center"
prop="name"
></el-table-column>
<el-table-column
label="用户角色"
align="center"
prop="roleName"
></el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
></el-table-column>
<el-table-column
label="更新时间"
align="center"
prop="updateTime"
></el-table-column>
<el-table-column label="操作" width="300px" align="center">
<template #="{row}">
<el-button type="primary" size="small" icon="User"
>分配角色</el-button
>
<el-button type="primary" size="small" icon="Edit">编辑</el-button>
<el-button type="primary" size="small" icon="Delete">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页器 -->
<el-pagination
v-model:current-page="pageNo"
v-model:page-size="pageSize"
:page-sizes="[5, 7, 9]"
:background="true"
layout="prev, pager, next, jumper, -> , sizes, total"
:total="total"
@current-change="handler"
@size-change=""
></el-pagination>
</el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { reqUserInfo } from "@/api/acl/user";
import type { UserResponseData, Records } from "@/api/acl/user/type";
let pageNo = ref<number>(1);
let pageSize = ref<number>(5);
let userArr = ref<Records>([]);
const getHasUser = async (pager = 1) => {
pageNo.value = pager;
const result: UserResponseData = await getHasUser(
pageNo.value,
pageSize.value
);
if (result.code === 200) {
total.value = result.data.total;
userArr.value = result.data.records;
}
};
const handler = async () => {
getHasUser();
};
onMounted(() => {
getHasUser();
});
</script>
<style scoped lang="scss">
.form {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
接口处理
src/api/acl/user/index.ts
import request from "@/utils/request";
import type { UserResponseData } from "./type";
enum API {
ALLUSER_URL = "/admin/acl/user/",
}
export const reqUserInfo = (page: number, limit: number) =>
request.get<any, UserResponseData>(API.ALLUSER_URL + `${page}/${limit}`);
处理接口 TS 类型
src/api/acl/user/type.ts
export interface ResponseData {
code: number;
message: string;
ok: boolean;
}
export interface User {
id?: number | string;
createTime?: string;
updateTime?: stirng;
username?: stirng;
password?: string;
name?: string;
phone?: null;
roleName?: string;
}
export type Records = User[];
export interface UserResponseData extends ResponseData {
data: {
records: Records;
total: number;
size: number;
curretn: number;
// orders: [];
// optimizeCountSql: boolean;
// hitCount: boolean;
// countId: null;
// maxLimit: null;
// searchCount: boolean;
pages: number;
};
}