开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情

写在前面

上篇文章介绍了如何在vite+vue项目中编写后台标签页栏代码，本篇文章介绍如何在vite+vue项目的后台系统中写列表、分页、查询

账号：admin
密码：admin

使用el-table显示列表

首先将侧边菜单和路由配置一下，我们模拟一般后台管理系统都有的菜单：系统设置，系统设置下配置一个子菜单：用户管理，在用户管理页面，我们要编写查询用户、新增用户、编辑用户、删除用户的代码（都由前端模拟数据，但是会写的很详细）。

打开写侧边菜单的文件：layout/Sidebar.vue，将其中定义menus的代码修改为以下代码：

const menus: { name: String, id: Number, title: String, children: any[] }[] = [
  {
    name: 'SystemSet', id: 1, title: '系统设置', children: [
      { name: 'UserManage', id: 11, title: '用户管理' }
    ]
  },
  {
    name: 'Menu2', id: 2, title: '菜单2', children: []
  },
]

再打开配置路由的文件：router/routes.ts，将其中菜单1-1的代码修改为如下代码：

            // 系统设置 - 用户管理
            {
                path: "/UserManage",
                name: 'UserManage',
                component: () =>
                    import("../views/SystemSet/UserManage/index.vue"),
                meta: { title: "用户管理" },
            },

接着我们在views文件夹下新建一个SystemSet文件夹，再在下面新建一个UserManage文件夹，在该文件夹下再新增一个index.vue文件，我们在views/SystemSet/UserManage/index.vue文件下编写用户列表页面代码，用户列表一般都有以下字段：

字段名	说明
userName	用户名
realName	姓名
gender	性别 0：男 1：女 2：未知
mobile	手机号
post	岗位
orgId	所属部门id
orgName	所属部门名称
roleIdList	角色id数组
roleNameList	角色名称数组
createTime	创建时间

使用el-table组件展示列表，stripe表示列表斑马线显示，border表示显示表格边框，再给el-table一个height，用来固定高度。

使用el-pagination组件展示分页，handleSizeChange方法用来改变 handleCurrentChange。

然后在onMounted钩子函数中调用getTableData方法以获取tableData的数据，定义page、limit用来获取tableData数据的时候实现分页，定义keyWord用来进行关键字搜索，

相关代码如下，这里就不贴全部代码了：

<template>
    <div class="user_manage">
        <div class="search_bar">
            <div class="search_lt">
                <el-input v-model="keyWord" placeholder="请输入关键词" clearable />
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </div>
            <div class="search_rt">
                <el-button type="primary" @click="handleAdd">新增</el-button>
            </div>
        </div>
        <el-table :data="tableData" stripe border :height="height">
            <el-table-column type="index" label="序号" width="55">
                <template #default="scope">
                    {{ ((page - 1) * limit + scope.$index + 1) }}
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="用户名" />
            <el-table-column prop="realName" label="姓名" />
            <el-table-column prop="orgName" label="部门" />
            <el-table-column prop="mobile" label="手机号" />
            <el-table-column prop="gender" label="性别">
                <template #default="scope">
                    <span v-show="(scope.row.gender === 1)">女</span>
                    <span v-show="(scope.row.gender === 0)">男</span>
                </template>
            </el-table-column>
            <el-table-column prop="post" label="岗位" />
            <el-table-column prop="roleNameList" label="角色" />
            <el-table-column fixed="right" label="操作" width="180">
                <template #default="scope">
                    <el-button type="primary" link @click="handleLook(scope.row)">查看详情</el-button>
                    <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" link @click="handleDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[20, 100, 300, 500]"
                layout="total, sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, Ref } from '@vue/reactivity';
import { onMounted, ref } from 'vue'
import { getUser } from '@/api/SystemSet/UserManage'

const height = computed(() => window.innerHeight - 220)

const keyWord = ref('')

let page = ref(1)
let limit = ref(20)
let total = ref(0)

let tableData: Ref = ref([])

onMounted(() => {
    getTableData()
})

const getTableData = () => {
    getUser({ page: page.value, limit: limit.value, keyWord: keyWord.value }).then((res: any) => {
        tableData.value = res.list
        total.value = res.total
    })
}

const handleSearch = () => {
    page.value = 1
    getTableData()
}

const handleSizeChange = (val: number) => {
    limit.value = val
    page.value = 1
    getTableData()
}
const handleCurrentChange = (val: number) => {
    page.value = val
    getTableData()
}
</script>

然后在api/SystemSet/UserManage.ts文件中模拟接口，部分代码如下，完整代码可去码云上clone：

import Axios from "../request";

let userList = [
  ...
]
for (let i = 0; i < 200; i++) {
    userList.push({
        userName: 'wangwu',
        realName: '王五',
        gender: 0,
        mobile: '13965874512',
        orgId: 3,
        orgName: '销售2部',
        post: '销冠',
        roleIdList: [3],
        roleNameList: ['销售人员'],
        createTime: '2022-12-05 13:10:00'
    })
}

/**
 * 获取用户列表
 * @method getUser
 */
export const getUser = (params: any) => {
    //模拟接口
    return new Promise((resolve, reject) => {
        const { page, limit, keyWord } = params
        let filter = userList.filter(el => el.userName.includes(keyWord) || el.realName.includes(keyWord))
        resolve({
            list: filter.slice((page - 1) * limit, page * limit),
            total: userList.length
        })
    })
}

最终效果如下：

写在最后

以上就是在vite+vue项目的后台系统中写列表、分页、查询的所有代码和说明

vite+vue项目之后台系统写列表、分页、查询

写在前面

使用el-table显示列表

写在最后