vue--vue+ElementUI实现动态树+数据表格+分页
发布时间
阅读量：
阅读量
目录
实现动态树
数据表结构：
前端代码：
数据表格
分页
实现动态树
数据表结构 ：
实现无限极分类 父类的pid是子类的id
后端代码：
/** * 根据父类id查询子类pid的数据（递归）
* @param pid
* @param mod
*/
public void queryModuleByPid(Integer pid,Module mod){
String sql="select id,pid,text,icon,url,sort from t_module_vue where"
+ " pid="+pid;
List<Module> lst=super.executeQuery(sql, null, new CallBack<Module>() {
@Override
public List<Module> forEach(ResultSet rs) throws SQLException {
List<Module> lst=new ArrayList<Module>();
Module node=null;
while(rs.next()) {
node=new Module();
int id=rs.getInt("id");
node.setId(id);
node.setPid(rs.getInt("pid"));
node.setText(rs.getString("text"));
node.setIcon(rs.getString("icon"));
node.setUrl(rs.getString("url"));
lst.add(node);
//此注释代表实现无限极分类,在此只实现了两级
//queryModuleByPid(id, root);
}
return lst;
}
});
mod.setChildren(lst);
}
/** * 获取Tree根节点
* @return
*/
public List<Module> queryRootNode(){
String sql="select id,pid,text,icon,url,sort from t_module_vue where"
+ " pid=-1";
return super.executeQuery(sql, null, new CallBack<Module>() {
@Override
public List<Module> forEach(ResultSet rs) throws SQLException {
List<Module> lst=new ArrayList<Module>();
Module root=null;
while(rs.next()) {
root=new Module();
int id=rs.getInt("id");
root.setId(id);
root.setPid(rs.getInt("pid"));
root.setText(rs.getString("text"));
root.setIcon(rs.getString("icon"));
root.setUrl(rs.getString("url"));
lst.add(root);
queryModuleByPid(id, root);
}
return lst;
}
});
}前端代码：
定义后端接口路径
'INIT_MENU': '/moduleAction.action', //初始化左侧菜单
左侧菜单栏
<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" >
<!-- <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-submenu中的属性 含义
index:用于菜单折叠,唯一
key:唯一
第二级节点el-submenu中的属性含义
index:用于页面跳转,唯一
key:唯一
-->
<el-submenu v-for="root in intMue" :index="'id-'+root.id" :key="'key-'+root.id">
<template slot="title">
<i :class="root.icon"></i>
<span>{{root.text}}</span>
</template>
<!-- :index 的url 会以栈的形式存储 this.$router.push-->
<el-menu-item v-for="node in root.children" :index="node.url" :key="'key-'+node.id">
<i :class="node.icon"></i>
<span slot="title">{{node.text}}</span>
</el-menu-item>
</el-submenu>
</template>
<script>
export default {
name:'LeftAside',
props:['collapsed'],
data:function(){
return{
intMue:[]
}
},
methods:{
},
created:function(){
let url=this.axios.urls.INIT_MENU;
this.axios.get(url,{params:{methodName:'queryTreeNode'}}).then(resp=>{
let data=resp.data.data;
// console.log(data);
this.intMue=data;
}).catch(error=>{
console.log(error);
})
}
}
</script>
数据表格
书本管理
定义后端接口路径:
'QUERY_BOOK': '/bookAction.action', //书本管理接口
创建书本路由
<template>
<div style="margin: 15px;">
<!-- 面包屑 路径导航 -->
<el-breadcrumb style="font-size: 16px;" separator-class="el-icon-arrow-right">
<el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>书本列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 搜索栏 -->
<el-form :inline="true" style="margin-top: 15px;margin-bottom: -15px;">
<el-form-item>
<el-input v-model="bookname" placeholder="书本名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="query(1)">查询</el-button>
</el-form-item>
</el-form>
<!-- 数据表格 -->
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="书本编号" width="180">
</el-table-column>
<el-table-column prop="bookname" label="书本名称" width="180">
</el-table-column>
<el-table-column prop="price" label="书本价格">
</el-table-column>
<el-table-column prop="booktype" label="书本类型">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'BookList',
data: function() {
return {
bookname: '',
tableData:[],
}
},
methods: {
query: function() {
let url =this.axios.urls.QUERY_BOOK;
//定义请求参数
let params={
url,
methodName:'queryBookPager',
bookname:this.bookname,
}
//发起请求
this.axios.post(url,params).then(resp=>{
let data=resp.data.data;
this.tableData=data.rows;
}).catch(error=>{
console.log(error);
});
}
}
}
</script>引入到路由器中
//书本管理
import BookList from '@/views/book/BookList'
{
path: '/Main',
name: 'Main',
component: Main,
children:[
{
path: '/book/BookList',
name: 'BookList',
component: BookList
}
]
}
分页
在书本路由中引入分页栏 再添加分页属性传到后端
<!-- 分页栏 -->
<el-pagination background style="margin-top: 15px;"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[10, 20, 30,40]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<script>
export default {
name: 'BookList',
data: function() {
return {
bookname: '',
tableData:[],
page:1,
rows:8,
total:0
}
},
methods: {
//每页显示条数的改变事件 r==rows
handleSizeChange:function(r){
console.log('当前页面改变事件='+r);
this.rows=r;
// this.page=1;
this.query(1);
},
//当前页面的改变事件
handleCurrentChange:function(p){
// this.page=p;
this.query(p);
console.log('当前页面的改变事件='+p);
},
query: function(p) {
this.page=p;
let url =this.axios.urls.QUERY_BOOK;
//定义请求参数
let params={
url,
methodName:'queryBookPager',
bookname:this.bookname,
page:p,
rows:this.rows
}
//发起请求
this.axios.post(url,params).then(resp=>{
let data=resp.data.data;
// console.log(data);
this.total=data.total;
this.tableData=data.rows;
}).catch(error=>{
console.log(error);
});
}
}
}
</script>
今天的内容就到这啦
全部评论 (0)
还没有任何评论哟~