vue动态树+数据表格+分页_elementplus 树形表格分页-CSDN博客

本文介绍了如何在Vue项目中动态生成二级菜单，使用element-ui的el-menu组件实现路由跳转和高亮当前选中项，并详细讲解了分页栏的配置。通过步骤解析了动态生成NavMenu导航菜单，以及在数据表格中实现分页功能的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

4）分页栏

第一步：封装一个

第二步：写一个钩子函数，一进主页就获取数据

第三步：给treenode进行赋值

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

4.1 给左侧菜单第一级进行绑值

第一级节点el-submenu中的属性含义：
index：用于菜单折叠，唯一
key：唯一

4.2 第二级进行绑值

第二级节点el-menu-item中的属性含义：
index：用于页面跳转，唯一
key：唯一

<el-menu router :default-active="$route.path">

默认激活哪个菜单

:index="node.url" ==> 放到this.$route.push ==>$route.path

<el-menu-item index="/company/userManager">用户管理</el-menu-item>
注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：后台t_tree_node表有几个节点的url为空，则会导致几个节点样式会一致

结果：

设置在主页面进行切换

创建book/AddBook -> 配置路由器Mian主页下的子 ->

在Main页面配置路由

同理配置BookList

在书本列表中（在组件：https://element.eleme.cn/#/zh-CN）查找

1）面包屑，路径导航

2）搜索栏

3）数据表格，定义一个空的数组来接收对象

4）分页栏

定义一个书本管理接口

分页数据

数据绑定

进行分页查询

<template>
  <div class="div-main">
    <!-- 1）面包屑，路径导航 -->
    <el-breadcrumb style="font-size:16px ;" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>书本列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 2）搜索栏 -->
    <el-form :inline="true" style="margin-top:15px;margin-bottom: -15px;">
      <el-form-item label="书本名称">
        <el-input v-model="bookName" placeholder="书本名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 3）数据表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号">
      </el-table-column>
      <el-table-column prop="bookname" label="书本名称">
      </el-table-column>
      <el-table-column prop="price" label="书本价格">
      </el-table-column>
      <el-table-column prop="booktype" label="书本类型">
      </el-table-column>
    </el-table>
    <!-- 4）分页栏 -->
    <el-pagination background style="margin-top: 15px;"
      @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 {
    name: 'BookList',
    data: function() {
      return {
        bookName: '',
        tableData: [],
        page: 1,
        rows: 10,
        total: 0
      }
    },
    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);
      },
      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);
        });
      }
    }
  }
</script>

<style>
  .div-main {
    margin: 15px;
  }
</style>