vue的动态树+数据表格+分页
发布时间
阅读量：
阅读量
动态树+数据表格+分页
后端存储系统
- 效果图
后台数据
t_user_vue
t_module_vue
t_book_vue
动态生成NavMenu导航菜单(只支持2级菜单)
- 结构
<el-menu key="" index="">
<el-submenu>
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<template slot="title">分组一</template>
<el-menu-item route="">
AI写代码- vue+element的el-menu组件实现路由跳转及当前项的设置
<el-menu router :default-active="$route.path">
<el-menu-item index="/company/userManager">用户管理</el-menu-item>
AI写代码注1：实现路由跳转的过程需要两个步骤：首先，在el-menu标签上添加router属性；其次，在每个el-menu-item标签内设置index属性为对应的url值即可完成点击el-menu-item的路由跳转操作。
注2：在el-menu标签中为当前项绑定 :default-active="route.path"属性时，请注意此处是绑定属性的操作而非赋值操作，在满足route.path等于该item所对应的index值时，则该item即为当前项状态。
注3：后台t_tree_node表中存在多个节点的url字段为空会导致这些节点在样式展示上产生一致的现象
动态树
LeftAside.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="leftCollapsed">
<!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
<div class="logobox">
<img class="logoimg" src="../assets/img/logo.png" alt="">
</div>
<el-menu-item index="/Home">
<i class="el-icon-s-home"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-submenu v-for="root in treeNodelst"
:key="'key-'+root.id"
:index="'index-'+root.id">
<template slot="title">
<i :class="root.icon"></i>
<span>{{root.text}}</span>
</template>
<el-menu-item v-for="node in root.children"
:key="'key-'+node.id"
:index="node.url">
<i :class="node.icon"></i>
<span slot="title">{{node.text}}</span>
</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
export default {
name:'LeftAside',
props:['leftCollapsed'],
data:function(){
return{
treeNodelst:[]
}
},
created:function(){
let url=this.axios.urls.SYSTEM_MODULE_TREEBODE;
let params={
methodName:'queryTreeNode'
};
this.axios.get(url,{params:params}).then(resp=>{
this.treeNodelst= resp.data.data;
console.log(this.treeNodelst);
}).catch(resp=>{
});
//配置首页默认打开
this.$router.push('/Home');
}
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 240px;
min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
border: none;
text-align: left;
}
.el-menu-item-group__title {
padding: 0px;
}
.el-menu-bg {
background-color: #1f2d3d !important;
}
.el-menu {
border: none;
}
.logobox {
height: 40px;
line-height: 40px;
color: #9d9d9d;
font-size: 20px;
text-align: center;
padding: 20px 0px;
}
.logoimg {
height: 40px;
}
</style>
AI写代码- 数据表格
<el-table :data="result" style="width: 100%;" :border="true" max-height="550">
<el-table-column prop="id" label="ID" min-width="10" align="center"></el-table-column>
<el-table-column prop="title" label="标题" min-width="20"></el-table-column>
<el-table-column prop="body" label="内容" min-width="70"></el-table-column>
</el-table>
AI写代码搜索栏+数据表格+分页
BookList.vue
<template>
<div>
<!-- 导航栏-->
<el-breadcrumb separator="/" style="padding-top:15px ;">
<el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>书本管理</el-breadcrumb-item>
</el-breadcrumb>
<!-- 搜索栏-->
<el-form :inline="true" class="demo-form-inline" style="margin-top: 15px;">
<el-form-item label="书本名称">
<el-input v-model="bookname"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="query(1)">查询</el-button>
</el-form-item>
</el-form>
<!--表格 -->
<el-table :data="result" style="width: 100%;" :border="true" max-height="550">
<el-table-column prop="id" label="书本编号" min-width="30" align="center"></el-table-column>
<el-table-column prop="bookname" label="书本名称" min-width="30"></el-table-column>
<el-table-column prop="price" label="书本价格" min-width="70"></el-table-column>
<el-table-column prop="booktype" label="书本类型" min-width="70"></el-table-column>
</el-table>
<!--分页-->
<el-pagination style="margin-top: 15px;"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[10, 20, 300, 40]"
:page-size="rows"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
name: 'BookList',
data: function() {
return {
bookname:null,
result:[],
page:1,
rows:10,
total:0
}
},
methods: {
query: function(page) {
if(null!=page){
this.page=page;
}
let url=this.axios.urls.BOOK_BOOKLIST;
let params={
bookname:this.bookname,
methodName:'queryBookPager',
page:this.page,
rows:this.rows
};
this.axios.post(url,params).then(resp=>{
console.log(resp.data.data.rows);
this.result=resp.data.data.rows;
this.total=resp.data.data.total;
}).catch(resp=>{
});
},
//改变每页显示条数所触发的事件
handleSizeChange:function(rows){
this.rows=rows;
this.page=1;
this.query(null);
},
//点击分页按钮所触发的事件
handleCurrentChange:function(page){
console.log(page);
this.page=page;
this.query(null);
}
}
}
</script>
<style>
</style>
AI写代码首页
Home.vue
<template>
<div>
<h1>首页</h1>
</div>
</template>
<script>
export default{
name:'Home',
data:function(){
return{
}
}
}
</script>
<style>
</style>
AI写代码所需其他配置
action.js
/** * 对后台请求的地址的封装，URL格式如下：
* 模块名_实体名_操作
*/
export default {
'SERVER': 'http://localhost:8080/j2eeVue', //服务器
'SYSTEM_USER_DOLOGIN': '/userAction.action', //登陆
'SYSTEM_USER_DOREG': '/userAction.action', //注册
'SYSTEM_MODULE_TREEBODE':'/moduleAction.action',
'BOOK_BOOKLIST':'/bookAction.action',
'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
return this.SERVER + this[k];
}
}
AI写代码index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Register from '@/views/Register'
import Main from '@/components/Main'
import LeftAside from '@/components/LeftAside'
import TopNav from '@/components/TopNav'
//首页
import Home from '@/views/Home'
//书本管理
import BookList from '@/views/book/BookList'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/Register',
name: 'Register',
component: Register
},
{
path: '/Main',
name: 'Main',
component: Main,
children:[
{
path: '/Home',
name: 'Home',
component: Home
},
{
path: '/book/BookList',
name: 'BookList',
component: BookList
}
]
},
{
path: '/LeftAside',
name: 'LeftAside',
component: LeftAside
},
{
path: '/TopNav',
name: 'TopNav',
component: TopNav
}
]
})
AI写代码main.js
效果图
全部评论 (0)
还没有任何评论哟~