1.创建用户列表页
- 新建 src/views/admin/user/index.vue 文件，内容如下：
<template>
<el-space fill>
<!--搜索-->
<el-card style="width: 100%" shadow="never">
搜索
</el-card>
<!--列表-->
<el-card style="width: 100%" shadow="never">
<!--按钮组-->
<div style="margin-bottom: 10px">
<el-button-group type="primary">
<el-button type="primary">
<el-icon>
<Plus />
</el-icon>
<span class="left-6">新增</span>
</el-button>
<el-button type="danger">
<el-icon>
<Delete />
</el-icon>
<span class="left-6">删除</span>
</el-button>
</el-button-group>
</div>
<!--列表-->
<el-table :data="tableData.list">
<el-table-column type="selection" width="55" />
<el-table-column prop="id" label="ID" width="50" />
<el-table-column prop="username" label="用户名" />
<el-table-column prop="phone" label="手机号码" />
<el-table-column prop="sex" label="性别" width="90">
<template #default="{ row }">
<span v-if="row.sex === 1">男</span>
<span v-else-if="row.sex === 2">女</span>
<span v-else>保密</span>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="90">
<template #default="{ row }">
<span v-if="row.status === 1">正常</span>
<span v-else>禁用</span>
</template>
</el-table-column>
<el-table-column prop="create_time" label="创建时间" width="200">
<template #default="{ row }">
{{ row.create_time }}
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template #default="{row}">
<el-button size="small" type="primary">编辑</el-button>
<el-button size="small" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="table-footer">
<div class="pagination">
<!-- 分页 -->
<el-pagination background layout="prev, pager, next"
v-if="tableData.total"
:total="tableData.total"
:page-size="tableData.pageSize"
:current-page="tableData.page"
@current-change="currentChange" />
</div>
</div>
</el-card>
</el-space>
</template>
<script setup>
import { reactive } from 'vue'
import { Delete, Plus } from '@element-plus/icons-vue'
const tableData = reactive({
page: 1, //当前默认页
total: 11, //模拟，总记录数
pageSize: 10, //每页记录数
list: [
{ id: 1, username: 'admin', phone: '18888888888', sex: 1, status: '1', create_time: '2024-05-14 10:10:10' },
{ id: 2, username: 'mallray', phone: '16666666666', sex: 1, status: '1', create_time: '2024-05-13 11:10:10' },
{ id: 3, username: 'mallray', phone: '16666666666', sex: 1, status: '1', create_time: '2024-05-13 11:10:10' },
{ id: 4, username: 'mallray', phone: '16666666666', sex: 1, status: '1', create_time: '2024-05-13 11:10:10' },
{ id: 5, username: 'mallray', phone: '16666666666', sex: 1, status: '1', create_time: '2024-05-13 11:10:10' },
{ id: 6, username: 'mallray', phone: '16666666666', sex: 1, status: '1', create_time: '2024-05-13 11:10:10' },
{ id: 7, username: 'mallray', phone: '16666666666', sex: 1, status: '1', create_time: '2024-05-13 11:10:10' },
{ id: 8, username: 'mallray', phone: '16666666666', sex: 1, status: '1', create_time: '2024-05-13 11:10:10' },
{ id: 9, username: 'mallray', phone: '16666666666', sex: 1, status: '1', create_time: '2024-05-13 11:10:10' },
{ id: 10, username: 'mallray', phone: '16666666666', sex: 1, status: '1', create_time: '2024-05-13 11:10:10' },
{ id: 11, username: 'mallray', phone: '16666666666', sex: 1, status: '1', create_time: '2024-05-13 11:10:10' }
]
})
//跳转导航
const currentChange = () => {
}
</script>
<style scoped>
.left-6 {
margin-left: 6px;
}
.table-footer {
padding-top: 10px;
box-sizing: border-box;
display: flex;
align-items: center;
}
.pagination {
margin: 0 auto;
flex-wrap: wrap;
justify-content: center;
}
</style>其中 v-if="tableData.total" 需要加上，否则在 total=0时会有报错。
2.左侧导航调整
- 打开 src/components/admin/MainSider.vue 文件，给 el-menu 增加 router属性，为了就是可以导航，代码如下：
<template>
<el-menu
router
default-active="1"
class="el-menu-vertical-width"
text-color="#fff"
@open="handleOpen"
@close="handleClose"
>
<el-sub-menu index="main">
<template #title>
<el-icon><Setting /></el-icon>
<span>系统设置</span>
</template>
<el-menu-item-group>
<el-menu-item index="/main/user">用户管理</el-menu-item>
<el-menu-item index="/main/rule">菜单管理</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
<el-sub-menu index="2">
<template #title>
<el-icon><Files /></el-icon>
<span>内容管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="2-1">分类管理</el-menu-item>
<el-menu-item index="2-2">文章管理</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
</el-menu>
</template>
<script setup>
import {
Files,
Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key, keyPath) => {
console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
console.log(key, keyPath)
}
</script>
<style scoped>
</style>3. 编辑 router路由
- 打开 src/router/index.js 找到如下高亮行位置，新增这段代码：
/**
* 静态路由
*/
const routes = [
{ path: '/login', component: () => import('@/views/admin/login/index.vue'), meta: { title: '管理登陆' } },
{
path: '/main',
component: () => import('@/views/admin/main.vue'),
meta: { requiresAuth: true, title: '后台管理' },
children: [
{ path: '', component: () => import('@/views/admin/workplace/index.vue'), meta: { title: '控制台' } },
{ path: 'user', component: () => import('@/views/admin/user/index.vue'), meta: { title: '用户管理' } } // [!code highlight]
]
}
]