使用ElementUI结合Vue完善主页的导航菜单和书籍管理以及后台数据分页查询

<template>
  <div>
    <!-- 导航菜单 -->
    <el-container style="height: 500px;">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']" :default-active="activeMenu" router>
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item index="/home/book-manage">书籍管理</el-menu-item>
            <el-menu-item index="/home/order-manage">订单管理</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>导航二</template>
            <el-menu-item index="/home/user-manage">用户管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主体内容 -->
      <el-main>
        <!-- 书籍管理的表格和分页 -->
        <el-table :data="books" style="width: 100%">
          <el-table-column prop="id" label="ID" width="180"></el-table-column>
          <el-table-column prop="title" label="书名" width="180"></el-table-column>
          <el-table-column prop="author" label="作者"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      activeMenu: '/home/book-manage', // 当前激活的菜单项
      books: [], // 书籍列表
      total: 0, // 书籍总数
      currentPage: 1, // 当前页
      pageSize: 10 // 每页显示条数
    };
  },
  methods: {
    // 编辑书籍
    handleEdit(index, row) {
      console.log('Edit book: ', row);
    },
    // 删除书籍
    handleDelete(index, row) {
      console.log('Delete book: ', row);
    },
    // 分页大小改变时的回调
    handleSizeChange(val) {
      this.pageSize = val;
      // 这里应该调用API重新加载