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

    目录

     一，动态树

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

    1.2 要获取树形节点的数据

    1.3.通过拿到的数据，渲染树形节点

     二，书籍列表查询

    新建一个Articles.vue

    实现步骤：

     1.el-table 列表组件

     2.利用axios调用后台的文章查询接口 ->created        没有传参的

    3.el-pagination 列表组件

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

    5. el-form 查询的筛选条件

     一，动态树

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

    LeftNav.vue

    1. <template>
    2.   <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
    3.     background-color="#334157" 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 index="1-4">
    9.       <template slot="title">
    10.         <i class="el-icon-location">i>
    11.         				<span>一级菜单span>
    12.       template>
    13.       <el-menu-item index="1-4-1">
    14.         <i class="el-icon-location">i>
    15.         				<span>二级菜单span>
    16.       el-menu-item>
    17.     el-submenu>
    18.  
    19.   el-menu>
    20. template>
    21. <script>
    22.   export default {
    23.     data() {
    24.       return {
    25.         collapsed: false
    26.       }
    27.     },
    28.     created() {
    29.       //总总线上取出this.collapsed变量
    30.       this.$root.Bus.$on("collapsed-side", v => {
    31.         this.collapsed = v;
    32.       });
    33.     }
    34.   }
    35. script>
    36. <style>
    37.   .el-menu-vertical-demo:not(.el-menu--collapse) {
    38.     width: 240px;
    39.     min-height: 400px;
    40.   }
    41.  
    42.   .el-menu-vertical-demo:not(.el-menu--collapse) {
    43.     border: none;
    44.     text-align: left;
    45.   }
    46.  
    47.   .el-menu-item-group__title {
    48.     padding: 0px;
    49.   }
    50.  
    51.   .el-menu-bg {
    52.     background-color: #1f2d3d !important;
    53.   }
    54.  
    55.   .el-menu {
    56.     border: none;
    57.   }
    58.  
    59.   .logobox {
    60.     height: 40px;
    61.     line-height: 40px;
    62.     color: #9d9d9d;
    63.     font-size: 20px;
    64.     text-align: center;
    65.     padding: 20px 0px;
    66.   }
    67.  
    68.   .logoimg {
    69.     height: 40px;
    70.   }
    71. style>

     效果展示

    1.2 要获取树形节点的数据

    this.axios.post

    LeftNav.vue

    1. //获取树形节点的数据
    2.       let url = this.axios.urls.SYSTEM_MENU_TREE;
    3.       // alert(url);
    4.       // {uname:'zs',pwd:'123'}
    5.  
    6.       // this指的是vue实例
    7.       this.axios.post(url,{})
    8.       .then(resp => { //代表成功  this污染的问题可以通过箭头函数来实现 jdk8的 lambda表达式
    9.         console.log(resp);
    10.  
    11.       }).catch(function(){ //代表失败
    12.  
    13.       });

    1.3.通过拿到的数据，渲染树形节点

    v-for 渲染节点

    定义渲染节点的变量

    新增代码：

     全部代码：

    1. <template>
    2.   <el-menu router :default-active="$route.path" default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
    3.     background-color="#334157" 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="m2.treeNodeId" :index="m2.url">
    14.         <i :class="m2.icon">i>
    15.         				<span>{{m2.treeNodeName}}span>
    16.       el-menu-item>
    17.     el-submenu>
    18.  
    19.   el-menu>
    20. template>
    21. <script>
    22.   export default {
    23.     data() {
    24.       return {
    25.         collapsed: false,
    26.         menus:[]
    27.       }
    28.     },
    29.     created() {
    30.       //总总线上取出this.collapsed变量
    31.       this.$root.Bus.$on("collapsed-side", v => {
    32.         this.collapsed = v;
    33.       });
    34.  
    35.       //获取树形节点的数据
    36.       let url = this.axios.urls.SYSTEM_MENU_TREE;
    37.       // alert(url);
    38.       // {uname:'zs',pwd:'123'}
    39.  
    40.       // this指的是vue实例
    41.       this.axios.post(url,{})
    42.       .then(resp => { //代表成功  this污染的问题可以通过箭头函数来实现 jdk8的 lambda表达式
    43.         console.log(resp);
    44.         this.menus = resp.data.result;
    45.  
    46.       }).catch(function(){ //代表失败
    47.  
    48.       });
    49.  
    50.     }
    51.   }
    52. script>
    53. <style>
    54.   .el-menu-vertical-demo:not(.el-menu--collapse) {
    55.     width: 240px;
    56.     min-height: 400px;
    57.   }
    58.  
    59.   .el-menu-vertical-demo:not(.el-menu--collapse) {
    60.     border: none;
    61.     text-align: left;
    62.   }
    63.  
    64.   .el-menu-item-group__title {
    65.     padding: 0px;
    66.   }
    67.  
    68.   .el-menu-bg {
    69.     background-color: #1f2d3d !important;
    70.   }
    71.  
    72.   .el-menu {
    73.     border: none;
    74.   }
    75.  
    76.   .logobox {
    77.     height: 40px;
    78.     line-height: 40px;
    79.     color: #9d9d9d;
    80.     font-size: 20px;
    81.     text-align: center;
    82.     padding: 20px 0px;
    83.   }
    84.  
    85.   .logoimg {
    86.     height: 40px;
    87.   }
    88. style>

    效果展示：

     二，书籍列表查询

    新建一个Articles.vue

    router/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.       path: '/',
    16.       name: 'Login',
    17.       component: Login
    18.     },
    19.     {
    20.       path: '/Login',
    21.       name: 'Login',
    22.       component: Login
    23.     },
    24.     {
    25.       path: '/Reg',
    26.       name: 'Reg',
    27.       component: Reg
    28.     },
    29.     {
    30.       path: '/AppMain',
    31.       name: 'AppMain',
    32.       component: AppMain,
    33.       children: [{
    34.           path: '/LeftNav',
    35.           name: 'LeftNav',
    36.           component: LeftNav
    37.         },
    38.         {
    39.           path: '/TopNav',
    40.           name: 'TopNav',
    41.           component: TopNav
    42.         },
    43.         {
    44.           path: '/sys/Articles',
    45.           name: 'Articles',
    46.           component: Articles
    47.         }
    48.       ]
    49.     }
    50.   ]
    51. })

     定义锚点：

     

    实现步骤：

    1.el-table 列表组件

    2.利用axios调用后台的文章查询接口 ->created        没有传参的

    3.el-pagination 列表组件

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

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

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

    5. el-form 查询的筛选条件

     

    this.doSearch 共用的查询方法

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

     1.el-table 列表组件

    1. <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
    2.       element-loading-text="拼命加载中" style="width: 100%;">
    3.       <el-table-column align="center" type="selection" width="60">
    4.       el-table-column>
    5.       <el-table-column sortable prop="id" label="文章ID" width="300">
    6.       el-table-column>
    7.       <el-table-column sortable prop="title" label="文章标题" width="300">
    8.       el-table-column>
    9.       <el-table-column sortable prop="body" label="文章内容" width="300">
    10.       el-table-column>
    11.       <el-table-column align="center" label="操作" min-width="300">
    12.         <template slot-scope="scope">
    13.           <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑el-button>
    14.           <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除el-button>
    15.         template>
    16.       el-table-column>
    17.     el-table>

     2.利用axios调用后台的文章查询接口 ->created        没有传参的

    获取表格中要展示的数据：

    定义渲染表格的变量

     将数据渲染进表格中

    3.el-pagination 列表组件

    （初步）

    2. 		<el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
    3. 		:current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
    4. 		:total="formInline.total">
    5. 		el-pagination>

     代码截图：

    初步效果展示：

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

    5. el-form 查询的筛选条件

    Articles.vue

    1. <template>
    2.   <div>
    3.     
    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.     <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
    14.       element-loading-text="拼命加载中" style="width: 100%;">
    15.       <el-table-column align="center" type="selection" width="60">
    16.       el-table-column>
    17.       <el-table-column sortable prop="id" label="文章ID" width="300">
    18.       el-table-column>
    19.       <el-table-column sortable prop="title" label="文章标题" width="300">
    20.       el-table-column>
    21.       <el-table-column sortable prop="body" label="文章内容" 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.     
    32.     <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
    33.       :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="100"
    34.       layout="total, sizes, prev, pager, next, jumper" :total="formInline.total">
    35.     el-pagination>
    36.   div>
    37. template>
    38.  
    39. <script>
    40.   export default {
    41.     name: 'Articles',
    42.     data() {
    43.       return {
    44.         listData: [],
    45.         formInline: {
    46.           page: 1,
    47.           total: 10,
    48.           title: ''
    49.         }
    50.       }
    51.     },
    52.     methods: {
    53.       handleSizeChange(rows) {
    54.         this.formInline.page = 1;
    55.         this.formInline.rows = rows;
    56.         this.search();
    57.       },
    58.       handleCurrentChange(page) {
    59.         this.formInline.page = page;
    60.         this.search();
    61.       },
    62.       //是为了代码复用
    63.       doSearch(param) {
    64.         //获取树形节点的数据
    65.         let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
    66.  
    67.         // this指的是vue实例
    68.         this.axios.post(url, param)
    69.           .then(resp => { //代表成功  this污染的问题可以通过箭头函数来实现 jdk8的 lambda表达式
    70.             console.log(resp);
    71.             this.listData = resp.data.result;
    72.             this.formInline = resp.data.pageBean;
    73.  
    74.           }).catch(function() { //代表失败
    75.  
    76.           });
    77.       },
    78.       search() {
    79.         // 按照条件进行查询
    80.         this.doSearch(this.formInline);
    81.       }
    82.     },
    83.     created() {
    84.       this.doSearch({});
    85.     }
    86.   }
    87. script>
    88.  
    89. <style>
    90. style>

    效果展示：

    分页：

     模糊查询

  • 相关阅读:
    linux开启交换空间
    线程和进程的区别
    深度学习论文精读[5]：Attention UNet
    PHP使用php-screw-plus扩展进行加解密
    fsbrain的学习笔记
    ALbert语言模型
    RTD系统
    javascript数据类型错误造成的前端分页不准的问题
    Java Object类详解
    Redis 中的事务分析，Redis 中的事务可以满足ACID属性吗？
  • 原文地址：https://blog.csdn.net/weixin_64313980/article/details/126827493