SPA项目开发之动态树+数据表格+分页

本篇博客记录如何用element-ui中的menu标签将后台返回的数据绑定到左侧菜单形成动态树、用自定义组件来展示文章列表以及绑定element-ui提供的分页组件来完成分页功能，是在上一篇博客的基础上进行改良的：

https://blog.csdn.net/weixin_42687829/article/details/104001334

1、动态树的实现

首先来看后台准备好的表设计以及接口返回的数据格式：

接着看element-ui提供的NavMenu导航菜单的结构：

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
</el-menu>

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

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

重点改动如下图圈中部分：

 LeftNav.vue完整代码：

<template>
  <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>
    <!-- 这里的index可以看成ID，也就是说它是唯一的 -->
    <el-submenu :index="'id_'+n.treeNodeId" v-for="n in result">
      <template slot="title">
        <i :class="n.icon"></i>
        <span>{{n.treeNodeName}}</span>
      </template>
      <!-- 这里的index则是路由要跳转的路径，由key来实现唯一标识的功能 -->
      <el-menu-item v-for="n2 in n.children" :key="'id_'+n2.treeNodeId" :index="n2.url">
        <i :class="n2.icon"></i>{{n2.treeNodeName}}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
  export default {
    name: 'LeftNav',
    data: function() {
      return {
        ts: new Date().getTime(),
        collapsed: false,
        result: []
      }
    },
    methods: {

    },
    created: function() {
      // 这个是为了左侧栏的汉字收缩起来
      this.$root.Bus.$on("collapsed-toggle", (v) => {
        this.collapsed = v;
      });

      let url = this.axios.urls.SYSTEM_TREENODE;
      this.axios.post(url, {}).then(respose => {
        console.log(respose.data);
        this.result = respose.data.data;
      });
    }
  }
</script>
<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    min-height: 400px;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
    text-align: left;
  }

  .el-menu-item-group__title {
    padding: 0px;
  }

  .el-menu-bg {
    background-color: #1f2d3d !important;
  }

  .el-menu {
    border: none;
  }

  .logobox {
    height: 40px;
    line-height: 40px;
    color: #9d9d9d;
    font-size: 20px;
    text-align: center;
    padding: 20px 0px;
  }

  .logoimg {
    height: 40px;
  }
</style>

最终实现的效果：

2、数据表格以及分页的实现

首先来看后台接口返回的数据格式：

接着看element-ui提供的table表格的结构：

<el-table :data="result" style="width: 100%;" :border="true" max-height="550">
    <el-table-column prop="id" label="ID"  min-width="10" align="center"></el-table-column>
    <el-table-column prop="title" label="标题" min-width="20"></el-table-column>
    <el-table-column prop="body" label="内容" min-width="70"></el-table-column>
</el-table>

Articles.vue完整代码：

<template>
  <div style="padding: 20px;">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="title" placeholder="文章标题"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <!-- 列表的第一列为序号，为保护数据信息，防止恶意爬虫，不能把后端给的id直接显示，应该显示行号 -->
      <el-table-column type="index" :index="indexMethod" label="序号" min-width="1">
      </el-table-column>
      <el-table-column sortable prop="title" label="文章内容" min-width="3">
      </el-table-column>
      <el-table-column sortable prop="body" label="文章内容" min-width="6">
      </el-table-column>
      <el-table-column label="操作" min-width="2">
        <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 style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="currentPage" :page-sizes="[5,10, 20, 30, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: 'Articles',
    data: function() {
      return {
        title: null,
        listData: [],
        currentPage: 1,
        rows: 5,
        total: 0
      };
    },
    methods: {
      search: function() {
        var url = this.axios.urls.ARTICLE_LIST;
        var formData = {
          title: this.title,
          pageNumber: this.currentPage,
          pageSize: this.rows
        }

        // 我们发现封装后的axios不需要再用qs.stringify(formData);做处理了
        this.axios.post(url, formData).then(response => {
          // 将后台返回的列表数据进行绑定
          this.listData = response.data.data.list
          // 将后台返回的总记录数进行绑定
          this.total = response.data.data.total;
        }).catch(function(error) {
          console.log(error);
        });
      },
      handleEdit: function() {

      },
      handleSizeChange: function(rows) {
        console.log("每页显示的记录数发生改变时会触发");
        this.currentPage = 1;
        this.rows = rows;
        this.search();
      },
      handleCurrentChange: function(page) {
        console.log("页码数发生改变时会触发");
        this.currentPage = page;
        this.search();
      },
      indexMethod(index) {
        return index + 1;
      }
    },
    created: function() {
      this.search();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }
</style>

由于Articles.vue是AppMain的子组件，所以路由需要挂载在AppMain上：

最终效果如下：