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

十念  金牌会员 | 2025-1-26 05:00:40 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题

主题 994|帖子 994|积分 2982

面包屑


创建一个面包屑组件
将路由导入然后格式化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>
  9. <script>
  10. import { routes } from '@/router';
  11. export default{
  12.     data(){
  13.         //用来记录所有路由对应的label
  14.         this.routesMap = new Map()
  15.         //用来将路由处理成map
  16.         this.initRoutesMap(routes)
  17.         return{
  18.             list:[],
  19.         }
  20.         
  21.     },
  22.     mounted(){
  23.     },
  24.     methods:{
  25.         initRoutesMap(routes){
  26.             routes.forEach(route => {
  27.                 this.routesMap.set(route.name, route.label)
  28.                 //如果有子路由
  29.                 if(route.children){
  30.                     this.initRoutesMap(route.children)
  31.                 }
  32.             });
  33.         }
  34.     },
  35.     watch:{
  36.         $route:{
  37.             immediate:true,
  38.             handler(route){
  39.                 //处理路径
  40.                 this.list = route.matched.map(item=>{
  41.                     return {
  42.                         name:item.name,
  43.                         label:this.routesMap.get(item.name)
  44.                     }
  45.                 })
  46.             }
  47.         }
  48.     }
  49. }
  50. </script>
  51. <style lang="scss" scoped>
  52. .el-breadcrumb {
  53.     margin-bottom: 20px;
  54. }
  55. </style>
复制代码
动态菜单

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


获取轮播图数据
  1. //导入封装的axios
  2. import ajax from "@/utils/axios";
  3. //获取轮播图列表
  4. export function bannerList(){
  5.     return ajax({
  6.         method:'GET',
  7.         url:'banner/list'
  8.     })
  9. }
  10. //添加轮播图
  11. export function addBanner(params){
  12.     return ajax({
  13.         method:'POST',
  14.         url:'banner/add',
  15.         data:params
  16.     })
  17. }
复制代码
创建轮播图页面
  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>
  19. <script>
  20. import { bannerList } from '@/api/banner';
  21. export default{
  22.     data(){
  23.         return {
  24.             bannerList:[]
  25.         }
  26.     },
  27.     mounted(){
  28.         bannerList().then(res=>{
  29.             this.bannerList=res.data
  30.         })
  31.     }
  32. }
  33. </script>
  34. <style lang="scss" scoped>
  35. .el-image{
  36.     width: 80px;
  37. }
  38. </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>
  8.             <el-form-item label="请输入link">
  9.                 <el-input v-model="formData.link" placeholder="请输入link"/>
  10.             </el-form-item>
  11.             <el-form-item>
  12.                 <el-upload
  13.                     class="avatar-uploader"
  14.                     :http-request="httpRequest"
  15.                     :show-file-list="false"
  16.                 >
  17.                     <img v-if="imageUrl" :src="imageUrl" class="avatar" />
  18.                     <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  19.                 </el-upload>
  20.             </el-form-item>
  21.             <el-button @click="addBanner" type="primary">添加</el-button>
  22.         </el-form>
  23.     </div>
  24. </template>
  25. <script>
  26. import { addBanner } from '@/api/banner';
  27. import { Plus } from '@element-plus/icons-vue';
  28. import { ElMessage } from 'element-plus';
  29. export default{
  30.     data(){
  31.         return {
  32.             imageUrl:'',
  33.             formData:{
  34.                 alt:'',
  35.                 link:'',
  36.                 img:''
  37.             }
  38.         }
  39.     },
  40.     components:{
  41.         Plus
  42.     },
  43.     methods:{
  44.         httpRequest(data){
  45.             //根据文件生成一个url地址,该地址用于临时展示的
  46.             //this.imageUrl = URL.createObjectURL(data.file)
  47.             //1、获取用户选择的图片
  48.             //2、将图片上传到存放图片的服务器,该服务器会返给图片地址
  49.             //3、将图片地址发送给后端存储
  50.             //创建一个文件加载器
  51.             let reader = new FileReader()
  52.             //指定其加载开始加载文件
  53.             reader.readAsDataURL(data.file)
  54.             //加载完成后的回调函数
  55.             reader.onload=()=>{
  56.                 this.imageUrl = reader.result;   //图片的base64
  57.                 this.formData.img = reader.result;
  58.             }
  59.         },
  60.         addBanner(){
  61.             addBanner(this.formData).then(res=>{
  62.                 if(res.code=='200'){
  63.                     ElMessage.success(res.message)
  64.                     //提交成功后进入轮播图列表查看
  65.                     this.$router.push('/banner/bannerlist')
  66.                 }else{
  67.                     ElMessage.error(res.message)
  68.                 }
  69.             })
  70.         }
  71.     }
  72. }
  73. </script>
  74. <style>
  75. .avatar-uploader .el-upload {
  76.   border: 1px dashed var(--el-border-color);
  77.   border-radius: 6px;
  78.   cursor: pointer;
  79.   position: relative;
  80.   overflow: hidden;
  81.   transition: var(--el-transition-duration-fast);
  82. }
  83. .avatar-uploader .el-upload:hover {
  84.   border-color: var(--el-color-primary);
  85. }
  86. .el-icon.avatar-uploader-icon {
  87.   font-size: 28px;
  88.   color: #8c939d;
  89.   width: 178px;
  90.   height: 178px;
  91.   text-align: center;
  92. }
  93. </style>
  94. <style lang="scss" scoped>
  95. .avatar-uploader .avatar {
  96.   width: 178px;
  97.   height: 178px;
  98.   display: block;
  99. }
  100. </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>
  7.         <el-button @click="changeType('line',['冰箱','空调','电视机','电磁炉'],['100','180','200','160'])" type="warning">电器销量</el-button>
  8.         <el-button @click="changeType('bar',['草莓','香蕉','西瓜','樱桃','甘蔗','橘子','橙子'],['200','111','222','333','210','123','20'])" type="danger">水果销量</el-button>
  9.     </div>
  10.     <div id="main">
  11.     </div>
  12. </template>
  13. <script>
  14. import * as echarts from 'echarts';
  15. export default{
  16.     data(){
  17.         return {
  18.             mychart: null
  19.         }
  20.     },
  21.     methods:{
  22.         changeType(type,x,y){
  23.             // 绘制图表
  24.             this.myChart.setOption({
  25.             title: {
  26.                 text: 'ECharts 入门示例'
  27.             },
  28.             tooltip: {},
  29.             toolbox: {
  30.                 feature: {
  31.                     saveAsImage: {}
  32.                 }
  33.             },
  34.             xAxis: {
  35.                 data: x || ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  36.             },
  37.             yAxis: {},
  38.             series: [
  39.                 {
  40.                 name: '销量',
  41.                 type: type||'bar',
  42.                 data: y || [5, 20, 36, 10, 10, 20]
  43.                 }
  44.             ]
  45.             });
  46.         }
  47.     },
  48.     mounted(){
  49.         // 基于准备好的dom,初始化echarts实例
  50.         this.myChart = echarts.init(document.getElementById('main'));
  51.         this.changeType('bar')
  52.     }
  53. }
  54. </script>
  55. <style lang="scss" scoped>
  56. #main{
  57.     height: 600px;
  58.     background-color: white;
  59. }
  60. </style>
复制代码
文件导入 excel

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


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

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

十念

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表