• SPA项目开发之 分页+数据表格+分页

     

    目录

    一、树形菜单功能实现

    1、要确定静态树形菜单节点的样式排版

    2、要获取树形节点的数据

    3、通过拿到的数据，渲染树形节点

    二、书籍列表查询

    1、el-table 列表组件

    2、利用axios调用后台的文章查询接口 ——> created   （无传参） 

    3、el-pagination 列表组件

     4、优化        将调用后台的文章查询接口的代码进行封装，为了复用

    5、el-form  查询的筛选条件    （传参）

    一、树形菜单功能实现

    1、要确定静态树形菜单节点的样式排版

    2、要获取树形节点的数据

            this.axios.post

    3、通过拿到的数据，渲染树形节点

            v-for渲染节点

            定义渲染节点的变量

    【LeftNav.vue】 

    1. <template>
    2. 	<el-menu  router :default-active="$route.path" default-active="2" class="el-menu-vertical-demo"  background-color="#334157"
    3. 	 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" >
    4. 		
    5. 		<div class="logobox">
    6. 			<img class="logoimg" src="../assets/img/logo.png" alt="">
    7. 		div>
    8.     <el-submenu v-for="m in menus" :index="'id_'+m.treeNodeId">
    9.       <template slot="title">
    10.           <i :class="m.icon">i>
    11.           <span>{{ m.treeNodeName}}span>
    12.         template>
    13.       <el-menu-item v-for="m2 in m.children" :key="'id_'+m2.treeNodeId" :index="m2.url">
    14.           <i :class="m2.icon">i>
    15.           <span>{{ m2.treeNodeName}}span>
    16.       el-menu-item>
    17.     el-submenu>
    18. 	el-menu>
    19. template>
    20. <script>
    21. 	export default {
    22.         data(){
    23.           return {
    24.             collapsed:false,
    25.             menus:[]
    26.           }
    27.         },
    28.       created() {
    29.       //    从总线上取出this.collapsed变量
    30.         this.$root.Bus.$on("collapsed-side",v => {
    31.           this.collapsed=v;
    32.         });
    33.  
    34.       // 获取树形节点的数据
    35.         let url = this.axios.urls.SYSTEM_MENU_TREE;
    36.  
    37.         //this指的是vue实例
    38.         this.axios.post(url,{})
    39.           .then(resp => {//代表成功 箭头函数 jdk8的语法
    40.             console.log(resp);
    41.             this.menus=resp.data.result;
    42.           }).catch(function (){//代表失败
    43.  
    44.         });
    45.       }
    46.   }
    47. script>
    48. <style>
    49. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    50. 		width: 240px;
    51. 		min-height: 400px;
    52. 	}
    53.  
    54. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    55. 		border: none;
    56. 		text-align: left;
    57. 	}
    58.  
    59. 	.el-menu-item-group__title {
    60. 		padding: 0px;
    61. 	}
    62.  
    63. 	.el-menu-bg {
    64. 		background-color: #1f2d3d !important;
    65. 	}
    66.  
    67. 	.el-menu {
    68. 		border: none;
    69. 	}
    70.  
    71. 	.logobox {
    72. 		height: 40px;
    73. 		line-height: 40px;
    74. 		color: #9d9d9d;
    75. 		font-size: 20px;
    76. 		text-align: center;
    77. 		padding: 20px 0px;
    78. 	}
    79.  
    80. 	.logoimg {
    81. 		height: 40px;
    82. 	}
    83. style>

    【Articles.vue】

     

    1. <template>
    2. <div>
    3.   文章管理组件
    4. div>
    5. template>
    6.  
    7. <script>
    8. export default {
    9.   name: 'Articles',
    10.   data() {
    11.     return {
    12.       msg: 'Welcome'
    13.     }
    14.   }
    15. }
    16. script>
    17.  
    18. <style scoped>
    19.  
    20. style>

    【index.js】

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import HelloWorld from "../components/HelloWorld";
    4. import AppMain from "../components/AppMain";
    5. import LeftNav from "../components/LeftNav";
    6. import TopNav from "../components/TopNav";
    7. import Login from "../views/Login";
    8. import Reg from "../views/Reg";
    9. import Articles from "../views/sys/Articles";
    10.  
    11. Vue.use(Router)
    12.  
    13. export default new Router({
    14.   routes: [
    15.     {
    16.       path: '/',
    17.       name: 'Login',
    18.       component: Login
    19.     },
    20.     {
    21.       path: '/Login',
    22.       name: 'Login',
    23.       component: Login
    24.     },
    25.     {
    26.       path: '/Reg',
    27.       name: 'Reg',
    28.       component: Reg
    29.     },
    30.     {
    31.       path: '/AppMain',
    32.       name: 'AppMain',
    33.       component: AppMain,
    34.       children:[
    35.         {
    36.           path: '/LeftNav',
    37.           name: 'LeftNav',
    38.           component: LeftNav
    39.         },
    40.         {
    41.           path: '/TopNav',
    42.           name: 'TopNav',
    43.           component: TopNav
    44.         },
    45.         {
    46.           path: '/sys/Articles',
    47.           name: 'Articles',
    48.           component: Articles
    49.         }
    50.       ]
    51.     }
    52.   ]
    53. })

     

    二、书籍列表查询

    1、el-table 列表组件

    2、利用axios调用后台的文章查询接口 ——> created   （无传参） 

    3、el-pagination 列表组件

            size-change        页大小改变调用事件

            current-change    页面改变调用的事件

     4、优化
            将调用后台的文章查询接口的代码进行封装，为了复用

    5、el-form  查询的筛选条件    （传参）

    this.doSeach  公用的查询方法

    this.search  带领查询条件的方法

    【LeftNav.vue】

    1. <template>
    2. 	<el-menu  router :default-active="$route.path" default-active="2" class="el-menu-vertical-demo"  background-color="#334157"
    3. 	 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" >
    4. 		
    5. 		<div class="logobox">
    6. 			<img class="logoimg" src="../assets/img/logo.png" alt="">
    7. 		div>
    8.     <el-submenu v-for="m in menus" :index="'id_'+m.treeNodeId">
    9.       <template slot="title">
    10.           <i :class="m.icon">i>
    11.           <span>{{ m.treeNodeName}}span>
    12.         template>
    13.       <el-menu-item v-for="m2 in m.children" :key="'id_'+m2.treeNodeId" :index="m2.url">
    14.           <i :class="m.icon">i>
    15.           <span>{{ m2.treeNodeName}}span>
    16.       el-menu-item>
    17.     el-submenu>
    18. 	el-menu>
    19. template>
    20. <script>
    21. 	export default {
    22.         data(){
    23.           return {
    24.             collapsed:false,
    25.             menus:[]
    26.           }
    27.         },
    28.       created() {
    29.       //    从总线上取出this.collapsed变量
    30.         this.$root.Bus.$on("collapsed-side",v => {
    31.           this.collapsed=v;
    32.         });
    33.  
    34.       // 获取树形节点的数据
    35.         let url = this.axios.urls.SYSTEM_MENU_TREE;
    36.  
    37.         //this指的是vue实例
    38.         this.axios.post(url,{})
    39.           .then(resp => {//代表成功 箭头函数 jdk8的语法
    40.             console.log(resp);
    41.             this.menus=resp.data.result;
    42.           }).catch(function (){//代表失败
    43.  
    44.         });
    45.       }
    46.   }
    47. script>
    48. <style>
    49. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    50. 		width: 240px;
    51. 		min-height: 400px;
    52. 	}
    53.  
    54. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    55. 		border: none;
    56. 		text-align: left;
    57. 	}
    58.  
    59. 	.el-menu-item-group__title {
    60. 		padding: 0px;
    61. 	}
    62.  
    63. 	.el-menu-bg {
    64. 		background-color: #1f2d3d !important;
    65. 	}
    66.  
    67. 	.el-menu {
    68. 		border: none;
    69. 	}
    70.  
    71. 	.logobox {
    72. 		height: 40px;
    73. 		line-height: 40px;
    74. 		color: #9d9d9d;
    75. 		font-size: 20px;
    76. 		text-align: center;
    77. 		padding: 20px 0px;
    78. 	}
    79.  
    80. 	.logoimg {
    81. 		height: 40px;
    82. 	}
    83. style>

    【Articles.vue】

    1. <template>
    2. <div>
    4.   <el-form :inline="true" :model="formInline" class="user-search">
    5.     <el-form-item label="搜索：">
    6.       <el-input size="small" v-model="formInline.title" placeholder="输入文章标题">el-input>
    7.     el-form-item>
    8.     <el-form-item>
    9.       <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索el-button>
    10.        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加el-button>
    11.     el-form-item>
    12.   el-form>
    13.   
    14.   <el-table size="small" :data="listData" highlight-current-row style="width: 100%;">
    15.     <el-table-column align="center" type="selection" min-width="60">
    16.     el-table-column>
    17.     <el-table-column sortable prop="id" label="文章ID" min-width="300">
    18.     el-table-column>
    19.     <el-table-column sortable prop="title" label="文章标题" min-width="300">
    20.     el-table-column>
    21.     <el-table-column sortable prop="body" label="文章内容" min-width="300">
    22.     el-table-column>
    23.     <el-table-column align="center" label="操作" min-width="300">
    24.       <template slot-scope="scope">
    25.         <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑el-button>
    26.         <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除el-button>
    27.       template>
    28.     el-table-column>
    29.   el-table>
    30.   
    31.   <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
    32.                  :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
    33.                  :total="formInline.total">
    34.   el-pagination>
    35. div>
    36. template>
    37.  
    38. <script>
    39. export default {
    40.   name: 'Articles',
    41.   data() {
    42.     return {
    43.        listData:[],
    44.       formInline:{
    45.          page:1,
    46.         total:10,
    47.         title:''
    48.       }
    49.     }
    50.   },
    51.   methods:{
    52.     handleSizeChange(rows) {
    53.       this.formInline.page = 1;
    54.       this.formInline.rows = rows;
    55.       this.search();
    56.     },
    57.     handleCurrentChange(page) {
    58.       this.formInline.page = page;
    59.       this.search();
    60.     },
    61.     //是为了代码复用
    62.     doSearch(param){
    63.       // 获取树形节点的数据
    64.       let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
    65.  
    66.       //this指的是vue实例
    67.       this.axios.post(url,param)
    68.         .then(resp => {//代表成功 箭头函数 jdk8的语法
    69.           console.log(resp);
    70.           this.listData=resp.data.result;
    71.           this.formInline=resp.data.pageBean;
    72.         }).catch(function (){//代表失败
    73.  
    74.       });
    75.     },
    76.     search(){
    77.     //  按照条件进行查询
    78.       this.doSearch(this.formInline);
    79.     }
    80.  
    81.   },
    82.   created() {
    83.       this.doSearch({});
    84.   }
    85. }
    86. script>
    87.  
    88. <style scoped>
    89.  
    90. style>

    效果展示：

     

    好啦，本篇内容分享到此结束，我们下期再见~~

  • 相关阅读:
    高原制氧机的工作原理以及对高原地区生活质量的积极影响
    【TB作品】MSP430G2553，单片机，口袋板， 烘箱温度控制器
    mysql索引失效的几种情况
    Java项目：SSM在线工艺品销售商城平台网站
    Python 实现个人博客系统（附零基础python学习资料）
    亚马逊卖家转独立站行动指南
    对比学习孪生网络之简单的手写数字集代码实战
    python3.8安装selenium报错
    什么东西可以替代触屏笔？Ipad触屏笔推荐品牌
    野火A7学习第七次(分频器相关)
  • 原文地址：https://blog.csdn.net/m0_67094505/article/details/126876828