239
社区成员
发帖
与我相关
我的任务
分享个人技术博客——使用Element Plus搭建管理员界面
| 这个作业属于哪个课程 | FZU_SE_teacherW_4 |
|---|---|
| 这个作业要求在哪里 | 软件工程实践总结&个人技术博客 |
| 这个作业的目标 | 个人技术总结 |
| 其他参考文献 | 《构建之法》 |
目录
- 1. 技术概述
- 2. 技术详述
- 2.1 Element Plus的安装与引入
- 2.2 布局容器
- 2.3 实现侧边菜单栏
- 2.4 实现用户管理表单
- 2.5 标签页的实现
- 3. 技术使用过程中遇到的问题和解决过程
- 3.1 问题1：如何将功能页面与el-main组件绑定
- 3.2 问题2：如何实现游记审核界面布局呈4列分布
- 4. 总结
- 参考文献
1. 技术概述
Element Plus 是一个基于 Vue 3 的高质量 UI 组件库。它包含了丰富的组件和扩展功能，例如表格、表单、按钮、导航、通知等，让开发者能够快速构建高质量的 Web 应用。Element Plus 的设计理念是：提供开箱即用的 UI 组件和扩展功能，帮助开发者快速构建应用程序。
2. 技术详述
2.1 Element Plus的安装与引入
可以通过 npm 或 yarn 进行安装。
npm install element-plus
# 或
yarn add element-plus
在项目中的main.js文件引入：
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
2.2 布局容器
Element Plus组件库拥有用于布局的容器组件，方便快速搭建页面的基本结构。
：外层容器。 ：顶栏容器。：侧边栏容器。：主要区域容器。：底栏容器。
在项目中我所使用的布局容器是带有侧边栏的容器。
<template>
<div class="common-layout">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</template>
2.3 实现侧边菜单栏
导航菜单默认为垂直模式，通过将el-menu的mode 属性设置为 horizontal 来使导航菜单变更为水平模式。 另外，在菜单中通过 sub-menu 组件可以生成二级菜单。点击特定菜单项后发生事件跳转至相应的界面。
<el-aside width="200px">
<el-row class="tac">
<el-col :span="24">
<div class="menu-header"></div>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
>
<el-menu-item index="1" @click="toggle('state1')">
<span>用户管理</span>
</el-menu-item>
<el-sub-menu index="2">
<template #title>
<span>游记管理</span>
</template>
<el-menu-item index="2-1" @click="toggle('state2')">游记审核</el-menu-item>
<el-menu-item index="2-2" @click="toggle('state3')">游记删除</el-menu-item>
</el-sub-menu>
<el-sub-menu index="3">
<template #title>
<span>活动管理</span>
</template>
<el-menu-item index="3-1" @click="toggle('state4')">活动审核</el-menu-item>
<el-menu-item index="3-2" @click="toggle('state5')">活动删除</el-menu-item>
</el-sub-menu>
</el-menu>
</el-col>
</el-row>
</el-aside>
2.4 实现用户管理表单
组件el-table用于展示多条结构类似的数据， 可对数据进行排序、筛选、对比或其他自定义操作。
<el-table :data="userData">
<el-table-column prop="userId" label="用户ID" width="200" />
<el-table-column prop="name" label="用户名" width="200" />
<el-table-column prop="address" label="用户居住地" width="200"/>
<el-table-column label="操作" >
<template #default="{ row }">
<a href="#" @click.prevent="deleteUser(row.userId)" target="_blank">{{ row.action }}</a>
</template>
</el-table-column>
</el-table>
2.5 标签页的实现
el-tabs组件可以分隔内容上有关联但属于不同类别的数据集合。默认选中第一个标签页，你也可以通过value 属性来指定当前选中的标签页。
<el-tabs v-model="activeName" class="demo-tabs">
<el-tab-pane label="待审核" name="first">
<div>
<el-row gutter="25" v-for="(row, rowIndex) in Math.ceil(tnItems.length / 4)" :key="rowIndex">
<el-col v-for="(item, index) in tnItems.slice(rowIndex * 4, rowIndex * 4 + 4)" :key="index" :span="6">
<div class="grid-content">
<div>
<a href="#"><img :src="item.img" @click="toggle('state21')"></a>
<p class="title">{{ item.title }}</p>
<p class="author">{{ item.author }}</p>
</div>
<el-button type="primary" plain><el-icon><CircleCheck /></el-icon> 通过</el-button>
<el-button type="danger" plain @click="reject()"><el-icon><CircleClose /></el-icon> 拒绝</el-button>
</div>
</el-col>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane label="已审核" name="second">
<div>
<el-row gutter="25" v-for="(row, rowIndex) in Math.ceil(tnItems.length / 4)" :key="rowIndex">
<el-col v-for="(item, index) in tnItems.slice(rowIndex * 4, rowIndex * 4 + 4)" :key="index" :span="6">
<div class="grid-content">
<div>
<a href="#"><img :src="item.img" @click="toggle('state21')"></a>
<p class="title">{{ item.title }}</p>
<p class="author">{{ item.author }}</p>
</div>
</div>
</el-col>
</el-row>
</div>
</el-tab-pane>
</el-tabs>
3. 技术使用过程中遇到的问题和解决过程
3.1 问题1：如何将功能页面与el-main组件绑定
解决过程：通过给管理员的每个功能设置一个状态，当用户点击任一功能按键时，将当前界面状态调整为该功能状态，再通过el-main组件当中的v-if选择显示该功能界面，而隐藏其他功能界面。
//点击触发状态转换事件
<el-menu-item index="1" @click="toggle('state1')">
<span>用户管理</span>
</el-menu-item>
<div class="main" v-if="states.state1.value">
//功能实现部分
</div>
<script setup>
const states = {
state1: ref(true),
state2: ref(false),
state3: ref(false),
state4: ref(false),
state5: ref(false),
state21: ref(false),
};
//功能转换函数
const toggle = (key) => {
Object.keys(states).forEach((stateKey) => {
states[stateKey].value = stateKey === key; //仅激活传入的状态
});
};
</script>
3.2 问题2：如何实现游记审核界面布局呈4列分布
解决过程：使用 Vue 的 v-for 指令来遍历行。Math.ceil(tnItems.length / 4) 计算需要多少行来展示所有item，设置每行有 4 列。tnItems.slice(rowIndex * 4, rowIndex * 4 + 4) 从数组中获取当前行的项目。
<div>
<el-row gutter="25" v-for="(row, rowIndex) in Math.ceil(tnItems.length / 4)" :key="rowIndex">
<el-col v-for="(item, index) in tnItems.slice(rowIndex * 4, rowIndex * 4 + 4)" :key="index" :span="6">
<div class="grid-content">
<div>
<a href="#"><img :src="item.img" @click="toggle('state21')"></a>
<p class="title">{{ item.title }}</p>
<p class="author">{{ item.author }}</p>
</div>
<el-button type="primary" plain><el-icon><CircleCheck /></el-icon> 通过</el-button>
<el-button type="danger" plain @click="reject()"><el-icon><CircleClose /></el-icon> 拒绝</el-button>
</div>
</el-col>
</el-row>
</div>
4. 总结
Element Plus组件库专为 Vue 3 设计，提供了丰富的 UI 组件和扩展功能，使界面开发变得更加方便快捷，它简化了开发流程，提升了应用的用户体验，并且通过详细的文档和教程，让开发者更容易掌握和使用。Element Plus 适合需要高质量 UI 组件和扩展功能的 Vue 3 项目，与其他 Vue.js 工具和库良好兼容，方便与其他 Vue.js 插件和库集成，其提供的丰富的组件，如表格、表单、按钮、导航、通知等，以及树形控件、拖拽列表等扩展组件，满足大部分场景需求，帮助开发者构建功能强大的前端应用。
参考文献
...全文
请发表友善的回复…
发表回复
