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

一、动态菜单实现

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

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

• 启动我们后端项目
• 然后找到对应的接口复制到浏览器上面
• OK，我们已经拿到了后台接口的数据
  为啥我的json这么好看,下载一个插件叫json formatter,具体咋下，魔法。

2.修改前端的代码

• 首先把我们之前测试前端动态数据的mockjs注释掉，不然访问不了后台
  
  我们先点击登录看一下返回的是什么数据，然后根据数据名修改我们的Login.vue
  
  -修改Login.vue
  
           现在去登录试试,已经成功跳转
  
           现在我们需要将左侧的导航改为动态的导航，修改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>

         配置一下后台的接口到action.js

         回到LeftNav.vue这个文件

         修改Left.vue的代码

         最终效果，这样，我们导航栏的动态加载基本完成。

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

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

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

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

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

         新建一个book文件夹，在book文件夹中创建两个组件，一个BookList.vue，另一个为AddBook.vue

         配置路由

         ps:别忘了让他们显示出来啊

         最终效果，点击哪个切换哪个

二、书籍表格展示

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

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

接口文档

点击跳转到接口文档