Vue中使用ElementUI+数据库 完成动态树+数据表格+分页

接上一篇首页导航与左侧菜单的搭建，今天使用数据库数据实现

• 动态树
• 数据表格
• 分页

一、动态树

 1.后台接口准备

数据库：

t_module_vue:

后台代码：

Dao类方法：

/**
     * 根据父类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 lst=super.executeQuery(sql, null, new CallBack() {
            @Override
            public List forEach(ResultSet rs) throws SQLException {
                List lst=new ArrayList();
                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);
    }

Action层：

public class ModuleAction extends DispatcherAction implements ModelDriver {
	private Module mod=new Module();
	private ModuleDao moduleDao=new ModuleDao();
	private ObjectMapper mapper=new ObjectMapper();
	@Override
	public Module getModel() {
		return mod;
	}

	public String queryTreeNode(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException{
		List nodes = moduleDao.queryRootNode();
		Map map=new HashMap();
		map.put("data", nodes);
		map.put("success", true);
		map.put("msg", "OK");
		mapper.writeValue(resp.getOutputStream(),map);
		return null;
	}
}

2.前端

在api/action.js中定义后端接口路径

'INIT_MENU': '/moduleAction.action', //初始化左侧菜单

 动态生成NavMenu导航菜单(只支持2级菜单)：

效果：

3.页面跳转

el-menu组件实现路由跳转及当前项的设置

用户管理

注1：要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。

创建页面，配置路由，配置到主页面Main中：

//书本新增
import AddBook from '@/views/book/AddBook'
//书本列表
import BookList from '@/views/book/BookList'

children:[
	{
    path: '/book/AddBook',
	name: 'AddBook',
	component: AddBook
	},{
	path: '/book/BookList',
	name: 'BookList',
	component: BookList
	}
]

二、数据表格

在api/action.js中定义后端接口路径

'QUERY_BOOK': '/bookAction.action', //书本管理接口

1.面包屑

  首页
  书本列表

2.搜索栏 

        
        
          
            
          
          
            查询
          
        

3.表格 

初始数据： 

    export default{
        name:'BookList',
        data:function(){
            return{
                bookname:'',
                tableData:[],
                page:1,
                rows:10,
                total:0
            }
        },

定义方法：

        query:function(p){
                this.page=p;
                //定义请求路径
                let url=this.axios.urls.BOOK_MANAGER;
                //定义请求参数
                let params={
                    methodName:'queryBookPager',
                    bookname:this.bookname,
                    page:p,
                    rows:this.rows
                };
                //发起ajax请求
                this.axios.post(url,params).then(resp=>{
                    let data=resp.data;
                    console.log(data);
                    this.total=data.data.total;
                    this.tableData=data.data.rows;
                }).catch(err=>{
                    console.log(err);
                });
            }

注2：导航当前项，在el-menu标签中绑定  :default-active="$route.path",注意是绑定属性，不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。 

注3：后台t_tree_node表有几个节点的url为空，则会导致几个节点样式会一致

三、分页 

分页栏：

参数说明： 

参数	说明	类型	可选值	默认值
small	是否使用小型分页样式	boolean	—	false
background	是否为分页按钮添加背景色	boolean	—	false
page-size	每页显示条目个数，支持 .sync 修饰符	number	—	10
total	总条目数	number	—	—
page-count	总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性	Number	—	—
pager-count	页码按钮的数量，当总页数超过该值时会折叠	number	大于等于 5 且小于等于 21 的奇数	7
current-page	当前页数，支持 .sync 修饰符	number	—	1
layout	组件布局，子组件名用逗号分隔	String	sizes, prev, pager, next, jumper, ->, total, slot	'prev, pager, next, jumper, ->, total'
page-sizes	每页显示个数选择器的选项设置	number[]	—	[10, 20, 30, 40, 50, 100]
popper-class	每页显示个数选择器的下拉框类名	string	—	—
prev-text	替代图标显示的上一页文字	string	—	—
next-text	替代图标显示的下一页文字	string	—	—
disabled	是否禁用	boolean	—	false
hide-on-single-page	只有一页时是否隐藏	boolean	—	-

事件说明： 

事件名称	说明	回调参数
size-change	pageSize 改变时会触发	每页条数
current-change	currentPage 改变时会触发	当前页
prev-click	用户点击上一页按钮改变当前页后触发	当前页
next-click	用户点击下一页按钮改变当前页后触发	当前页

方法：

        methods:{
            //每页显示条数的改变事件
            handleSizeChange:function(r){
                console.log(r);
                this.rows=r;
                //this.page=1;
                this.query(1);
            },
            //当前页码的改变事件
            handleCurrentChange:function(p){
                console.log(p);
                //this.page=p;
                this.query(p);
            }

效果：

 博主水平有限，难免有错。欢迎评论交流