vue-vue+ElementUI实现动态树+数据表格+分页

最新推荐文章于 2023-11-28 15:27:37 发布

你七哥哥

最新推荐文章于 2023-11-28 15:27:37 发布

阅读量479

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_59218114/article/details/124733704

版权

实现动态树
数据表结构：
实现无限极分类父类的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" >

<div class="logobox">
<img class="logoimg" src="../assets/img/logo.png" alt="">
</div>



<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>

<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
}
]
}

实现动态树
数据表结构：
        实现无限极分类 父类的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>