vue3+elementPlus之背景管理体系（从0到1）(day4-完结)

十念  论坛元老 | 2025-1-26 05:00:40 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1616|帖子 1616|积分 4848

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
面包屑


创建一个面包屑组件
将路由导入然后格式化map对象 key-value
将当前路由的key和value获取然后存入list数组中
遍历list数据，渲染内容
  1. <!--BreadcrumbCom.vue-->
  2. <template>
  3.     <el-breadcrumb separator=">">
  4.       <el-breadcrumb-item v-for="item in list" :key="item.name" :to="{ name: item.name }">{
  5.   
  6.   { item.label }}</el-breadcrumb-item>
  7.     </el-breadcrumb>
  8.   </template>
  10. <script>
  11. import { routes } from '@/router';
  12. export default{
  13.     data(){
  14.         //用来记录所有路由对应的label
  15.         this.routesMap = new Map()
  16.         //用来将路由处理成map
  17.         this.initRoutesMap(routes)
  18.         return{
  19.             list:[],
  20.         }
  21.         
  23.     },
  24.     mounted(){
  26.     },
  27.     methods:{
  28.         initRoutesMap(routes){
  29.             routes.forEach(route => {
  30.                 this.routesMap.set(route.name, route.label)
  31.                 //如果有子路由
  32.                 if(route.children){
  33.                     this.initRoutesMap(route.children)
  34.                 }
  35.             });
  36.         }
  37.     },
  38.     watch:{
  39.         $route:{
  40.             immediate:true,
  41.             handler(route){
  42.                 //处理路径
  43.                 this.list = route.matched.map(item=>{
  44.                     return {
  45.                         name:item.name,
  46.                         label:this.routesMap.get(item.name)
  47.                     }
  48.                 })
  49.             }
  50.         }
  51.     }
  52. }
  53. </script>
  55. <style lang="scss" scoped>
  56. .el-breadcrumb {
  57.     margin-bottom: 20px;
  58. }
  59. </style>
复制代码
动态菜单

在store/index.js中创建全局变量记录当前路由路径，并创建修改方法
  1. //记录当前路由路径
  2. currentPath:'/'
  5. //修改路由路径的方法
  6. updateCurrentPath(state, value){
  7.   state.currentPath = value
  8. }
复制代码
在AsideCom.vue中加载菜单
  1. <template>
  2.     <el-menu default-active="currentPath" :collapse="collapse" router class="el-menu-vertical-demo">
  3.         <el-menu-item index="/">首页</el-menu-item>
  5.         <el-sub-menu v-for="item in userInfo.checkedkeys" :key="item.path" :index="item.path">
  6.           <template #title>
  7.             <el-icon>
  8.               <Avatar />
  9.             </el-icon>
  10.             <span>{
  11.   
  12.   { item.label }}</span>
  13.           </template>
  14.           <el-menu-item v-for="child in item.children" :key="child.path" :index="`/${item.path}/${child.path}`">{
  15.   
  16.   { child.label }}</el-menu-item>
  17.         </el-sub-menu>
  19.         <!-- <el-sub-menu index="/manager">
  20.           <template #title>
  21.             <el-icon><Avatar /></el-icon>
  22.             <span>账号管理</span>
  23.           </template>
  24.           <el-menu-item index="/manager/managerlist">管理员列表</el-menu-item>
  25.           <el-menu-item index="/manager/userlist">用户列表</el-menu-item>
  26.         </el-sub-menu>  
  28.         <el-sub-menu index="/banner">
  29.           <template #title>
  30.             <el-icon><Avatar /></el-icon>
  31.             <span>轮播图管理</span>
  32.           </template>
  33.           <el-menu-item index="/banner/bannerlist">轮播图列表</el-menu-item>
  34.           <el-menu-item index="/banner/addbanner">添加轮播图</el-menu-item>
  35.         </el-sub-menu>   -->
  36.       </el-menu>
  37. </template>
  39. <script>
  40. import { Avatar } from '@element-plus/icons-vue';
  41. import { mapState } from 'vuex';
  43. export default{
  44.     data(){
  45.         return{
  47.         }
  48.     },
  49.     computed:{
  50.       ...mapState(['currentPath','userInfo'])
  51.     },
  52.     components:{
  53.         Avatar,
  54.     },
  56.     props:['collapse']
  58. }
  59. </script>
复制代码
轮播图管理


获取轮播图数据
  1. //导入封装的axios
  2. import ajax from "@/utils/axios";
  4. //获取轮播图列表
  5. export function bannerList(){
  6.     return ajax({
  7.         method:'GET',
  8.         url:'banner/list'
  9.     })
  10. }
  12. //添加轮播图
  13. export function addBanner(params){
  14.     return ajax({
  15.         method:'POST',
  16.         url:'banner/add',
  17.         data:params
  18.     })
  19. }
复制代码
创建轮播图页面
  1. <!--BannerListView.vue-->
  2. <template>
  3.     <div>
  4.         <el-table :data="bannerList" >
  5.             <el-table-column type="index"></el-table-column>
  6.             <el-table-column prop="img" label="图片">
  7.                 <template #default="scope">
  8.                     <div style="display: flex;align-items: center;">
  9.                         <el-image :src="scope.row.img"></el-image>
  10.                     </div>
  11.                 </template>
  12.             </el-table-column>
  13.             <el-table-column prop="alt" label="提示信息"></el-table-column>
  14.             <el-table-column prop="link" label="链接"></el-table-column>
  15.         </el-table>
  16.     </div>
  17.    
  18. </template>
  20. <script>
  21. import { bannerList } from '@/api/banner';
  23. export default{
  24.     data(){
  25.         return {
  26.             bannerList:[]
  27.         }
  28.     },
  29.     mounted(){
  30.         bannerList().then(res=>{
  31.             this.bannerList=res.data
  32.         })
  33.     }
  34. }
  35. </script>
  37. <style lang="scss" scoped>
  38. .el-image{
  39.     width: 80px;
  40. }
  41. </style>
复制代码
添加轮播图

  1. <!--AddBannerView.vue-->
  2. <template>
  3.     <div>
  4.         <el-form>
  5.             <el-form-item label="请输入alt">
  6.                 <el-input v-model="formData.alt" placeholder="请输入alt"/>
  7.             </el-form-item>
  9.             <el-form-item label="请输入link">
  10.                 <el-input v-model="formData.link" placeholder="请输入link"/>
  11.             </el-form-item>
  13.             <el-form-item>
  14.                 <el-upload
  15.                     class="avatar-uploader"
  16.                     :http-request="httpRequest"
  17.                     :show-file-list="false"
  18.                 >
  19.                     <img v-if="imageUrl" :src="imageUrl" class="avatar" />
  20.                     <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  21.                 </el-upload>
  22.             </el-form-item>
  23.             <el-button @click="addBanner" type="primary">添加</el-button>
  24.         </el-form>
  25.     </div>
  26. </template>
  28. <script>
  29. import { addBanner } from '@/api/banner';
  30. import { Plus } from '@element-plus/icons-vue';
  31. import { ElMessage } from 'element-plus';
  33. export default{
  34.     data(){
  35.         return {
  36.             imageUrl:'',
  37.             formData:{
  38.                 alt:'',
  39.                 link:'',
  40.                 img:''
  41.             }
  42.         }
  43.     },
  44.     components:{
  45.         Plus
  46.     },
  47.     methods:{
  48.         httpRequest(data){
  49.             //根据文件生成一个url地址，该地址用于临时展示的
  50.             //this.imageUrl = URL.createObjectURL(data.file)
  52.             //1、获取用户选择的图片
  53.             //2、将图片上传到存放图片的服务器，该服务器会返给图片地址
  54.             //3、将图片地址发送给后端存储
  56.             //创建一个文件加载器
  57.             let reader = new FileReader()
  58.             //指定其加载开始加载文件
  59.             reader.readAsDataURL(data.file)
  60.             //加载完成后的回调函数
  61.             reader.onload=()=>{
  62.                 this.imageUrl = reader.result;   //图片的base64
  63.                 this.formData.img = reader.result;
  64.             }
  65.         },
  66.         addBanner(){
  67.             addBanner(this.formData).then(res=>{
  68.                 if(res.code=='200'){
  69.                     ElMessage.success(res.message)
  70.                     //提交成功后进入轮播图列表查看
  71.                     this.$router.push('/banner/bannerlist')
  72.                 }else{
  73.                     ElMessage.error(res.message)
  74.                 }
  75.             })
  76.         }
  77.     }
  78. }
  80. </script>
  81. <style>
  82. .avatar-uploader .el-upload {
  83.   border: 1px dashed var(--el-border-color);
  84.   border-radius: 6px;
  85.   cursor: pointer;
  86.   position: relative;
  87.   overflow: hidden;
  88.   transition: var(--el-transition-duration-fast);
  89. }
  91. .avatar-uploader .el-upload:hover {
  92.   border-color: var(--el-color-primary);
  93. }
  95. .el-icon.avatar-uploader-icon {
  96.   font-size: 28px;
  97.   color: #8c939d;
  98.   width: 178px;
  99.   height: 178px;
  100.   text-align: center;
  101. }
  102. </style>
  104. <style lang="scss" scoped>
  105. .avatar-uploader .avatar {
  106.   width: 178px;
  107.   height: 178px;
  108.   display: block;
  109. }
  110. </style>
复制代码
图表管理echarts

官网：Apache ECharts
安装echarts
  1. npm install echarts
复制代码
导入图表
将图表绑定在指定元素上
设置一个option
  1. <template>
  2.     <div>
  3.         <el-button @click="changeType('line')">折线图</el-button>
  4.         <el-button @click="changeType('bar')" type="primary">柱状图</el-button>
  5.         <el-button @click="changeType('pie')" type="success">饼图</el-button>
  6.         <el-button @click="changeType('scatter')" type="info">散点图</el-button>
  8.         <el-button @click="changeType('line',['冰箱','空调','电视机','电磁炉'],['100','180','200','160'])" type="warning">电器销量</el-button>
  9.         <el-button @click="changeType('bar',['草莓','香蕉','西瓜','樱桃','甘蔗','橘子','橙子'],['200','111','222','333','210','123','20'])" type="danger">水果销量</el-button>
  10.     </div>
  11.     <div id="main">
  13.     </div>
  14. </template>
  16. <script>
  17. import * as echarts from 'echarts';
  19. export default{
  20.     data(){
  21.         return {
  22.             mychart: null
  23.         }
  24.     },
  25.     methods:{
  26.         changeType(type,x,y){
  27.             // 绘制图表
  28.             this.myChart.setOption({
  29.             title: {
  30.                 text: 'ECharts 入门示例'
  31.             },
  32.             tooltip: {},
  33.             toolbox: {
  34.                 feature: {
  35.                     saveAsImage: {}
  36.                 }
  37.             },
  38.             xAxis: {
  39.                 data: x || ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  40.             },
  41.             yAxis: {},
  42.             series: [
  43.                 {
  44.                 name: '销量',
  45.                 type: type||'bar',
  46.                 data: y || [5, 20, 36, 10, 10, 20]
  47.                 }
  48.             ]
  49.             });
  50.         }
  51.     },
  52.     mounted(){
  53.         // 基于准备好的dom，初始化echarts实例
  54.         this.myChart = echarts.init(document.getElementById('main'));
  55.         this.changeType('bar')
  56.     }
  57. }
  59. </script>
  61. <style lang="scss" scoped>
  62. #main{
  63.     height: 600px;
  64.     background-color: white;
  65. }
  66. </style>
复制代码
文件导入 excel

安装
  1. npm install xlsx
复制代码
选择文件
将文件读成数据流
将数据流读为对象
将对象中的工作表内容读取出来
将读取的内容转为json
数据渲染
  1. <template>
  2.     <div>
  3.         <el-button type="success" @click="importClick">选择文件</el-button>
  5.         <input ref="inp" hidden type="file" @change="importChange"/>
  7.         <el-table :data="computedTableData" >
  8.             <el-table-column type="index" :index="(currentPage-1)*10+1" label="序号" width="80" />
  9.             <el-table-column prop="nickname" label="昵称"></el-table-column>
  10.             <el-table-column label="性别">
  11.                 <template #default="scope">
  12.                     <span>{
  13.   
  14.   { scope.row.sex == -1?'女':'男' }}</span>
  15.                 </template>
  16.             </el-table-column>
  17.             <el-table-column prop="tel" label="联系电话"></el-table-column>
  18.         </el-table>
  20.         <!-- 分页显示 -->
  21.         <el-pagination background v-model:current-page="currentPage" layout="prev, pager, next" :total="userList.length" />
  22.     </div>
  23. </template>
  25. <script>
  26. import * as XLSX from 'xlsx'
  28. export default{
  29.     data(){
  30.         return {
  31.             userList:[],
  32.             currentPage: 1
  33.         }
  34.     },
  35.     methods:{
  36.         importClick(){
  37.             //选择文件按钮的点击事件
  38.             this.$refs.inp.click()
  39.         },
  40.         importChange(event){
  41.             //选中文件后的回调函数
  42.             //console.log(event.target.files[0])
  43.             //获取选中的文件
  44.             const file = event.target.files[0];
  45.             //创建文件的加载器
  46.             const reader = new FileReader();
  47.             //将文件读取成数据流
  48.             reader.readAsBinaryString(file);
  49.             reader.onload = () => {
  50.                 //将文件转换成js对象
  51.                 const boxx = XLSX.read(reader.result,{type:'binary'})
  52.                 //将工作表1中的数据提取出来
  53.                 let res = boxx.Sheets['工作表1'];
  54.                 //将工作表1中的数据转换成json
  55.                 res = XLSX.utils.sheet_to_json(res);
  56.                 this.userList = res;
  57.             }
  58.         }
  59.     },
  60.     mounted(){
  62.     },
  63.     computed:{
  64.         //计算当前页显示的数据
  65.         computedTableData(){
  66.             return this.userList.slice((this.currentPage-1)*10,(this.currentPage-1)*10+10);
  67.         }
  68.     }
  69. }
  70. </script>
复制代码
文件导出 excel

利用文档：js-export-excel - npm
安装
  1. npm install js-export-excel
复制代码
1、导入利用函数
2、创建导出对象
3、界说导出内容
4、实现具体导出
  1. <template>
  2.     <div>
  3.         <!-- 文件导出有两种方式：
  4.             1）直接使用a标签 -->
  5.         <!-- <a href="https://code.jquery.com/jquery-3.6.2.min.js" download=""></a> -->
  6.             <!-- 2）自己将数据处理后本地保存 -->
  7.             <el-button @click="exportClick">文件导出</el-button>
  8.             <el-table :data="computedTableData" >
  9.             <el-table-column type="index" :index="(currentPage-1)*10+1" label="序号" width="80" />
  10.             <el-table-column prop="nickname" label="昵称"></el-table-column>
  11.             <el-table-column label="性别">
  12.                 <template #default="scope">
  13.                     <span>{
  14.   
  15.   { scope.row.sex == -1?'女':'男' }}</span>
  16.                 </template>
  17.             </el-table-column>
  18.             <el-table-column prop="tel" label="联系电话"></el-table-column>
  19.         </el-table>
  21.         <!-- 分页显示 -->
  22.         <el-pagination background v-model:current-page="currentPage" layout="prev, pager, next" :total="userList.length" />
  23.     </div>
  24. </template>
  26. <script>
  27. import { userList } from '@/api/user';
  28. //1、导入使用函数
  29. import ExportJsonExcel from 'js-export-excel';
  30. export default{
  31.     data(){
  32.         return {
  33.             userList:[],
  34.             currentPage: 1
  35.         }
  36.     },
  37.     mounted(){
  38.         userList().then(res=>{
  39.             this.userList = res.data;
  40.         })
  41.     },
  42.     methods:{
  43.         exportClick(){
  44.             //2、创建导出对象
  45.             let option= {}
  46.             //导出文件名字
  47.             option.fileName = 'userList'
  48.             //导出内容
  49.             option.datas = [
  50.                 {
  51.                     //需要导出的数据
  52.                     sheetData:this.userList,
  53.                     //工作表名称
  54.                     sheetName: "工作表1",
  55.                     sheetFilter: ["nickname", "sex", "tel"],
  56.                     sheetHeader: ["昵称", "性别", "联系电话"],
  57.                     columnWidths: [20, 20],
  58.                 }
  59.             ];
  60.             
  61.             //实现具体导出
  62.             var toExcel = new ExportJsonExcel(option); //new
  63.             toExcel.saveExcel(); //保存
  64.         }
  65.     },
  66.     computed:{
  67.         //计算当前页显示的数据
  68.         computedTableData(){
  69.             return this.userList.slice((this.currentPage-1)*10,(this.currentPage-1)*10+10);
  70.         }
  71.     }
  72. }
  73. </script>
复制代码
富文本编辑器


官方文档：TinyMCE 7 Documentation | TinyMCE Documentation
安装：
  1. npm install @tinymce/tinymce-vue tinymce
  2. 或npm install --save tinymce "@tinymce/tinymce-vue@^5"
复制代码
利用，需要申请api-key
  1. <template>
  2.     <div>
  3.         <Editor></Editor>
  4.     </div>
  5. </template>
  7. <script>
  8. import Editor from '@tinymce/tinymce-vue'
  9. export default{
  10.     data(){
  11.         return {
  13.         }
  14.     },
  15.     mounted(){
  16.         
  17.     },
  18.     components:{
  19.         Editor,
  20.     }
  21. }
  23. </script>
  25. <style lang="scss" scoped>
  27. </style>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

十念

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表