SPA项目开发之动态树+数据表格+分页-优快云博客

一、树形菜单显示

开启后台，main.js不需要引用”process.env.MOCK && require('@/mock')“

1.获取数据库数据

LeftNav.vue

<script>
   export default {
       data(){
return{
collapsed:false
}
},
created(){
let url=this.axios.urls.SYSTEM_MENU_TREE;
this.axios.post(url,{}).then((resp)=>{
console.log(resp);
}).catch(function(error){
console.log(error);
});
this.$root.Bus.$on("collapsed-aside",(v)=>{
this.collapsed=v;
});
}
   }
</script>

2.数据渲染界面及跳转

LeftNav.vue

<template>
   <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" background-color="#334157"
   text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" >
       
       <div class="logobox">
           <img class="logoimg" src="../assets/img/logo.png" alt="">
       </div>
           <el-submenu :index="'id_'+m.treeNodeId" v-for="m in menus">
               <template slot="title">
<i :class="m.icon"></i>
<span>{{m.treeNodeName}}</span>
</template>

               <el-menu-item :key="'id_'+m2.treeNodeId" :index="m2.url" v-for="m2 in m.children">
<i :class="m2.icon"></i>
<span>{{m2.treeNodeName}}</span>
</el-menu-item>
           </el-submenu>
   </el-menu>
</template>
<script>
   export default {
       data(){
return{
collapsed:false,
//这里只存放所有的一级菜单
menus:[]
}
},
created(){
let url=this.axios.urls.SYSTEM_MENU_TREE;
this.axios.post(url,{}).then((resp)=>{
console.log(resp);
this.menus=resp.data.result;
}).catch(function(error){
console.log(error);
});
this.$root.Bus.$on("collapsed-aside",(v)=>{
this.collapsed=v;
});
}
   }
</script>

二、列表查询

1.点击左侧菜单栏时界面跳转到右侧

定义锚点：AppMain.vue

<el-main class="main-center">
<router-view></router-view>
</el-main>

index.js配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Reg from '@/views/Reg'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
import Articles from '@/views/sys/Articles'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/Login',
name: 'Login',
component: Login
},
{
path: '/Reg',
name: 'Reg',
component: Reg
},
{
path: '/AppMain',
name: 'AppMain',
component: AppMain,
children:[
{
path: '/LeftNav',
name: 'LeftNav',
component: LeftNav
},
{
path: '/TopNav',
name: 'TopNav',
component: TopNav
},
{
path: '/sys/Articles',
name: 'Articles',
component: Articles
}
]
}
]
})

新建Aticles组件

<template>
  <div>
      <!-- 这是文章列表组件 -->
      <!-- 列表 -->
      <el-table size="small" :data="listData" highlight-current-row border element-loading-text="拼命加载中"
            style="width: 100%;">
            <el-table-column align="center" type="selection" width="60">
            </el-table-column>
            <el-table-column sortable prop="id" label="文章ID" width="300">
            </el-table-column>
            <el-table-column sortable prop="title" label="文章标题" width="300">
            </el-table-column>
            <el-table-column sortable prop="body" label="文章内容" width="300">
            </el-table-column>
            <!-- <el-table-column align="center" label="操作" min-width="300">
             <template slot-scope="scope">
               <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
               <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
             </template>
           </el-table-column> -->
          </el-table>
    </div>
</template>

<script>
export default {
  name: 'Articles',
  data () {
    return {
      listData:[]
    }
  },
  created(){
    let url=this.axios.urls.SYSTEM_ARTICLE_LIST;
    this.axios.post(url,{}).then((resp)=>{
      console.log(resp);
      this.listData=resp.data.result;
    }).catch(function(error){
      console.log(error);
    });
    this.$root.Bus.$on("collapsed-aside",(v)=>{
      this.collapsed=v;
    });
  }
}
</script>

<style>
</style>

三、分页、搜索查询

Articles.vue

<script>
export default {
name: 'Articles',
data() {
return {
listData: [],
formInline: {
page: 1,
row: 10,
tatal: 0,
title: ''
}
}
},
methods: {
handleSizeChange(rows) {
console.log("当前页查询数据量：" + rows)
this.formInline.page = 1;
this.formInline.rows = rows;
this.search();
},
handleCurrentChange(page) {
console.log("当前页为：" + page)
this.formInline.page = page;
this.search();
},
doSearch(param) {
let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
this.axios.post(url, param).then((resp) => {
console.log(resp);
this.listData = resp.data.result;
this.formInline.total = resp.data.pageBean.total;
}).catch(function(error) {
console.log(error);
});
this.$root.Bus.$on("collapsed-aside", (v) => {
this.collapsed = v;
});
},
search(){
this.doSearch(this.formInline);
}
},
created() {
this.doSearch({});
}
}
</script>