1.首先下载vue-element-admin,然后在idea导入项目,以下是项目源码结构
https://github.com/PanJiaChen/electron-vue-admin
2.配置路由
2.1在src/router/module下新建组件TestMenu.js
/** When your routing table is too long, you can split it into small modules **/
import Layout from '@/layout'
const TestMenuRouter = {
path: '/Test',
component: Layout,
redirect: '/Test',
name: 'Test',
meta: {
title: '测试',
icon: 'table'
},
children: [
{
path: '/TestMenu1',
component: () => import('@/views/TestMenu/menu1'),
name: 'TestMenu1',
meta: { title: '测试1', icon: 'edit' }
},
{
path: '/TestMenu2',
component: () => import('@/views/TestMenu/menu2'),
name: 'TestMenu2',
meta: { title: '测试2', icon: 'edit' }
}
]
}
export default TestMenuRouter
2.2在src/router/index.js引入新建组件,并且在常量中配置相关的内容
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const constantRoutes = [
{
...
TestMenuRouter,
}
]
export const asyncRoutes = [
{
}
]
const createRouter = () => new Router({
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
const router = createRouter()
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export default router
3.新增页面:menu1.vue
<template>
<div class="app-container documentation-container">
<el-main>
<el-row>
<el-col :span='4'>
</el-col>
<el-col :span='20'>
<!--设置默认打开的tab页,1.绑定v-model;2.在生命周期中设置该v-model的数据为tab页的name-->
<!--设置type为border-card时,tab页为卡片化tab页-->
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label='数据源结构' name="first">
<!--设置tree-props,即可将表格变成树形表格,注意一点一定要设置row-key-->
<el-table
border
style="width: 100%;margin-bottom: 20px;"
:tree-props="{ hasChildren: 'hasChildren', children: 'children' }"
:data="tableData"
default-expand-all
row-key="id"
>
<template v-for="(item,index) in tableLabel">
<el-table-column
:label='item.label'
:prop="item.prop"
align="center"
>
</el-table-column>
</template>
</el-table>
</el-tab-pane>
<el-tab-pane label="规则" name="second" >
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</el-main>
</div>
</template>
<script>
export default {
name: 'TestMenu1',
components: { },
data() {
return {
activeName: "second",
tableLabel:[],
tableData:[]
}
},
created(){
/* this.activeName="second"*/
this.getTableLabel()
this.getTableData()
/*通过this.$route.query来获取跳转界面的参数*/
this.activeName=this.$route.query.pageActiveName
},
methods:{
getTableData(){
this.tableData = [
{ id: 1,
date: "个人",
children: [
{
id: 11,
name: "第二根半价套餐",
alias: "是兄弟就来割",
operator: "铁手无情",
state: "无痛"
}
]
},
{ id: 2,
date: "科室",
children: []
},
{ id: 3,
date: "全院",
children: [
{
id: 31,
name: "第二根半价套餐",
alias: "是兄弟就来割",
operator: "铁手无情",
state: "无痛"
},
{
id: 41,
name: "第二根半价套餐",
alias: "是兄弟就来割",
operator: "铁手无情",
state: "无痛"
}
]
}
]
},
getTableLabel(){
this.tableLabel=[
{
label: "级别",
prop: "date"
},
{
label: "名称",
prop: "name"
},
{
label: "别名",
prop: "alias"
},
{
label: "操作员",
prop: "operator"
},
{
label: "状态",
prop: "state"
}
]
}
}
}
</script>
<style lang="scss" scoped>
.documentation-container {
margin: 50px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;}
.document-btn {
flex-shrink: 0;
display: block;
cursor: pointer;
background: black;
color: white;
height: 60px;
padding: 0 16px;
margin: 16px;
line-height: 60px;
font-size: 20px;
text-align: center;
}
</style>
- 执行命令npm run dev,进行测试,能正常看见页面,新建菜单成功