Vue-Element-UI简单项目完善动态树+数据表格+分页

淡淡的烟草味﹌ 2023-10-14 06:58 32阅读 0赞

#### Vue-Element-UI简单项目完善动态树+数据表格+分页 ####

*  一、动态菜单实现
 *   *  1.首先测试后端数据是否能拿到
     *  2.修改前端的代码
     *  3.vue+element的el-menu组件实现路由跳转及当前项的设置
 *  二、书籍表格展示
 *  接口文档

## 一、动态菜单实现 ##

我相信经过上次做的东西，我想大家都很熟练了。还是老样子，先启动项目，前端的项目进入到你自己的路径再cmd `npm run dev` 先跑起来，后端的项目也跑起来。注意：端口号要不一样哦。

### 1.首先测试后端数据是否能拿到 ###

*  启动我们后端项目
 *  然后找到对应的接口复制到浏览器上面
 *  OK，我们已经拿到了后台接口的数据  
    ![在这里插入图片描述][3b834bcacef24e9b83ff599e05ba7c1c.png] 为啥我的json这么好看,下载一个插件叫json formatter,具体咋下，魔法。

### 2.修改前端的代码 ###

*  首先把我们之前测试前端动态数据的mockjs注释掉，不然访问不了后台  
    ![在这里插入图片描述][658b70bead784d3392f8b6d8ca7f47dc.png]  
    我们先点击登录看一下返回的是什么数据，然后根据数据名修改我们的Login.vue  
    ![在这里插入图片描述][05786dd65c76427db111299901b57f47.png]  
    \-修改Login.vue  
    ![在这里插入图片描述][9f52cfe1f1ed46e78013a666b3e1eb31.png]  
    现在去登录试试,已经成功跳转  
    ![在这里插入图片描述][a3650071dfc44b4fb4c0a86c03fbcb8c.png]  
    现在我们需要将左侧的导航改为动态的导航，修改LeftNav.vue代码  
    复制一份代码过来，并注释掉之前的

<el-submenu index="" key="">
            <template slot="title">
                <i class=""></i>
                <span></span>
            </template>
    		<el-menu-item index="" key="">
                <i class=""></i>
                <span></span>
            </el-menu-item>
    	</el-submenu>

![在这里插入图片描述][7255da2c6b55415c8b8e2de7494749e9.png]

配置一下后台的接口到action.js  
![在这里插入图片描述][be694b8b52a9450084bf9cf22e9e1329.png]  
回到LeftNav.vue这个文件  
![在这里插入图片描述][d43fa29f42cd4107a834f185c238d8bc.png]  
修改Left.vue的代码  
![在这里插入图片描述][f9cecc291fe44b2ba4d5ddf680862508.png]  
最终效果，这样，我们导航栏的动态加载基本完成。  
![在这里插入图片描述][1075848672d74cbc8ffd4a1be847611f.png]

### 3.vue+element的el-menu组件实现路由跳转及当前项的设置 ###

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

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

注3：el-submenu标签中的url属性不能为空，且不能相同，否则会导致多个节点收缩/折叠效果相同的问题。

router :default-active="$route.path"

![在这里插入图片描述][9212e908a5334c90b986d5ec8908d749.png]  
新建一个book文件夹，在book文件夹中创建两个组件，一个BookList.vue，另一个为AddBook.vue  
![在这里插入图片描述][abc90b6e790b4436ba1debe0d5b82ed1.png]  
配置路由  
![在这里插入图片描述][9354cedf0cf84f75842688f3cadc4d75.png]  
ps:别忘了让他们显示出来啊  
![在这里插入图片描述][255eddf5703a450cbc8d72fe308109ef.png]  
最终效果，点击哪个切换哪个  
![在这里插入图片描述][a2b9fda956054bbc9dbc0fef8bd48665.png]

## 二、书籍表格展示 ##

修改BookList.vue方法

<template>
      <div style="padding: 20px;">
        
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="书籍名称">
            <el-input v-model="bookname" placeholder="书籍名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        
        <el-table :data="tableData" stripe 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>
        
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
          :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    
      </div>
    </template>
    
    <script>
      export default {
          
        data() {
          
          return {
          
            bookname: '',
            tableData: [],
            page: 1,
            rows: 10,
            total: 0
          }
        },
        methods: {
          
          query(params){
          
            //通用查询方法
            let url = this.axios.urls.BOOK_LIST;
            this.axios.get(url, {
          
              params: params
            }).then(resp => {
          
              console.log(resp);
              this.tableData = resp.data.rows;
              this.total = resp.data.total;
            }).catch(err => {
          
    
            })
          },
          onSubmit() {
          
            //搜索方法
            let params = {
          
              bookname: this.bookname
            }
            this.query(params);
    
          },
          handleSizeChange(r) {
          
            console.log("当前展示的记录数为" + r + "条")
            let params = {
          
              bookname: this.bookname,
              rows:r,
              page:this.page
            }
            this.query(params)
    
          },
          handleCurrentChange(p) {
          
            console.log("当前展示的页码是第" + p + "页")
            let params = {
          
              bookname: this.bookname,
              page:p,
              rows:this.rows
            }
            this.query(params)
          }
    
        }
      }
    </script>
    
    <style>
    </style>

![在这里插入图片描述][ffe078733c314fd8ae22dd5f35e3f3a5.gif_pic_center]

这样今天的基本功能完成了。

## 接口文档 ##

[点击跳转到接口文档][Link 1]

[3b834bcacef24e9b83ff599e05ba7c1c.png]: https://img-blog.csdnimg.cn/3b834bcacef24e9b83ff599e05ba7c1c.png
[658b70bead784d3392f8b6d8ca7f47dc.png]: https://img-blog.csdnimg.cn/658b70bead784d3392f8b6d8ca7f47dc.png
[05786dd65c76427db111299901b57f47.png]: https://img-blog.csdnimg.cn/05786dd65c76427db111299901b57f47.png
[9f52cfe1f1ed46e78013a666b3e1eb31.png]: https://img-blog.csdnimg.cn/9f52cfe1f1ed46e78013a666b3e1eb31.png
[a3650071dfc44b4fb4c0a86c03fbcb8c.png]: https://img-blog.csdnimg.cn/a3650071dfc44b4fb4c0a86c03fbcb8c.png
[7255da2c6b55415c8b8e2de7494749e9.png]: https://img-blog.csdnimg.cn/7255da2c6b55415c8b8e2de7494749e9.png
[be694b8b52a9450084bf9cf22e9e1329.png]: https://img-blog.csdnimg.cn/be694b8b52a9450084bf9cf22e9e1329.png
[d43fa29f42cd4107a834f185c238d8bc.png]: https://img-blog.csdnimg.cn/d43fa29f42cd4107a834f185c238d8bc.png
[f9cecc291fe44b2ba4d5ddf680862508.png]: https://img-blog.csdnimg.cn/f9cecc291fe44b2ba4d5ddf680862508.png
[1075848672d74cbc8ffd4a1be847611f.png]: https://img-blog.csdnimg.cn/1075848672d74cbc8ffd4a1be847611f.png
[9212e908a5334c90b986d5ec8908d749.png]: https://img-blog.csdnimg.cn/9212e908a5334c90b986d5ec8908d749.png
[abc90b6e790b4436ba1debe0d5b82ed1.png]: https://img-blog.csdnimg.cn/abc90b6e790b4436ba1debe0d5b82ed1.png
[9354cedf0cf84f75842688f3cadc4d75.png]: https://img-blog.csdnimg.cn/9354cedf0cf84f75842688f3cadc4d75.png
[255eddf5703a450cbc8d72fe308109ef.png]: https://img-blog.csdnimg.cn/255eddf5703a450cbc8d72fe308109ef.png
[a2b9fda956054bbc9dbc0fef8bd48665.png]: https://img-blog.csdnimg.cn/a2b9fda956054bbc9dbc0fef8bd48665.png
[ffe078733c314fd8ae22dd5f35e3f3a5.gif_pic_center]: https://img-blog.csdnimg.cn/ffe078733c314fd8ae22dd5f35e3f3a5.gif#pic_center
[Link 1]: https://blog.csdn.net/qq_52642109/article/details/131962813