基于vue3+elementplus的后台管理系统jw-admin
该项⽬ 基于vue3 + element plus ，⽬前还处于前期阶段，有许多功能和细节还没搞好
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
快速上⼿
1. 在 fig.js 配置需要的路由信息
2. 在 views ⽂件夹下⾯新建需要的页⾯
⽂件夹结构（其他是基本的vue-cli结构
名称描述
admin系统配置设置⽂件 ；建议不要改动
api api接⼝⽂件夹components⾃定义组件⽂件夹
配置⽂件 fig.js
系统配置⽂件
名称描述
name系统显⽰名称
baseUrl服务器请求路径
sysColor系统配置信息 主要是颜⾊
otherRoutes不出现在左侧导航栏显⽰的路由页⾯ 数组navs出现在左侧的路由页⾯ 数组
navs 出现在左侧的路由页⾯
名称说明
path跳转路径
name唯⼀name值
title显⽰名称
icon显⽰图标（element带的icon
component显⽰的页⾯路径
children代表存在⼦选项（数组
children代表存在⼦选项（数组
vue element admin名称说明
isHide是否在左侧导航栏隐藏（默认不设置为false
navs:[
{
path:"/sonProject", name:"sonProject", isShow:true,
component:()=>import('@/views/sonProject.vue'),
},
{
path:"/home", name:"home", title:"⾸页", icon:"el-icon-monitor",
component:()=>import('@/views/welcome.vue'),
},
{
path:"/project", name:"project", title:"项⽬管理", icon:"el-icon-files",
component:()=>import('@/views/project.vue'),
children:[
{
path:"/project", name:"project", title:"项⽬管理", icon:"el-icon-files",
component:()=>import('@/views/project.vue'),
children:[
{
path:"/project", name:"project", title:"项⽬管理", icon:"el-icon-files",
component:()=>import('@/views/project.vue'),
}
]
},
]
},
]
请求
api ⽂件夹下⾯的 index.js ⽂件封装 有 可以不修改直接使⽤
组件（components ⽂件夹下⾯
分页表格组件（pages-tables
使⽤步骤
1、js 引⼊⽂件
import tables from "../components/page-tables";
2、注册使⽤
components:{
tables //注册table组件
},
3、在页⾯使⽤表格组件 绑定对应的数据
<tables :tableData="tableData"></tables>
4、在js中配置 需要的 **tableData **数据
名称类型说明
tableData Object分页表格需要的对象数据
reqUrl String表格请求的远程地址
auto String是否⾃动请求接⼝ ，需要设置true才能⾃动
operaData Object操作按钮数据
名称类型说明
operaData -->data Array按钮数组
operaData -->data–>label String按钮名称
operaData -->data–>type String按钮样式 （primary / success / warning / danger / info / text operaData -->data–>method按钮点击的事件
columnData Array表格需要显⽰的数据
columnData–>prop String表格显⽰数据的 字段 根据接⼝返回的数据columnData–>label String显⽰的标题
columnData–>align String对齐⽅式（left/center/right
columnData–>width string对应列的宽度
columnData–>render Function⾃定义扩展样式，vue的render渲染
⽰例：
tableData:{
reqUrl:":38080/app/mock/data/1680155",
operaData:{
data:[
{ label:"删除", type:"danger", method:(index, row)=>{this.del(index, row)}},
{ label:"增加", type:"primary", method:(index, row)=>{this.add(index, row)}},
{ label:"其他", type:"info", method:(index, row)=>{this.edit(index, row)}}]
},
columnData:[
{ prop:"name", label:"名字", align:"center"},
{ prop:"content", label:"内容", align:"center"},
{
prop:"times", label:"次数", width:200, align:"center",
render:(h, params)=>{
return h("el-rate",{ attrs:{ value: w.times, disabled:true}})
}
},
{ prop:"time_c", label:"时间", align:"center"}
]
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。