• 表格数据方法、分页方法及组件的封装和分页组件的复用

    请假列表

     1、数据获取与显示的通用方法封装

    1. <template>
    2.     <div> <el-table
    3.       :data="tableData"
    4.       height="450"
    5.       border
    6.       style="width: 100%"
    7.       :default-sort="{ prop: 'number', order: 'Ascending' }"
    8.     >
    9.       
    10.       <el-table-column type="selection" width="55"> el-table-column>
    11.       <el-table-column prop="id" label="用户ID" align="center">
    12.       el-table-column>
    13.       <el-table-column prop="userId" label="所属班级" align="center">
    14.       el-table-column>
    15.       <el-table-column prop="title" label="请假理由" align="center" sortable>
    16.       el-table-column>
    17.       <el-table-column prop="completed" label="批准情况" align="center">
    18.       el-table-column>
    19.       <el-table-column fixed="right" label="操作" width="100" align="center">
    20.         <template slot-scope="scope">
    21.           <el-button
    22.             @click="edit(scope.row)"
    23.             type="primary"
    24.             icon="el-icon-edit"
    25.             circle
    26.             size="mini"
    27.           >el-button>
    28.           <el-button
    29.             @click="del(scope.row)"
    30.             type="danger"
    31.             icon="el-icon-delete"
    32.             circle
    33.             size="mini"
    34.           >el-button>
    35.         template>
    36.       el-table-column>
    37.     el-table>div>
    38.   template>
    39.   
    40.   <script>
    41.   import {  getTableData } from '@/utils/table.js'
    42.   export default {
    43.     data(){
    44.       return{
    45.         tableData: []
    46.       }
    47.     },
    48.     created(){
    49.       getTableData(this, '/works')
    50.     }
    51.   }
    52.   script>
    53.   
    54.   <style>
    55.   
    56.   style>

     table.js

    1. //请假列表的 表格数据获取 封装方法的处理
    2. export function getTableData(root, url, params ){
    3.     root.service.get(url, { params: params || {} })
    4.     .then(res => {
    5.         if(res.data.status === 200 ){
    6.             root.tableData = res.data.data
    7.             root.total = res.total
    8.         }
    9.     })
    10.     .catch((error) => {
    11.         throw error;
    12.     });
    13. }

    2、数据转换

    共两层遍历：

    1、获取数据对象——user

    2、因为要进行转换格式的数据在每一个的user对象里，∴先进行遍历user对象

    3、每一个user对象都有很多数据，都是键值对的方式。当表格中需要转换的数据不只一两处，为了提高代码复用性，所以采用数组的方式，存放需要转换的数据的键名。最后只需要遍历user对象的数组，通过三元式进行判断，再修改新值（为了显示且不修改原数据而建）

    1. <template>
    2.     <div> <el-table
    3.       :data="tableData"
    4.       height="450"
    5.       border
    6.       style="width: 100%"
    7.       :default-sort="{ prop: 'number', order: 'Ascending' }"
    8.     >
    9.       
    10.       <el-table-column type="selection" width="55"> el-table-column>
    11.       <el-table-column prop="id" label="用户ID" align="center">
    12.       el-table-column>
    13.       <el-table-column prop="userId" label="所属班级" align="center">
    14.       el-table-column>
    15.       <el-table-column prop="title" label="请假理由" align="center" sortable>
    16.       el-table-column>
    17.       <el-table-column prop="completed_text" label="批准情况" align="center">
    18.       el-table-column>
    19.       <el-table-column fixed="right" label="操作" width="100" align="center">
    20.         <template slot-scope="scope">
    21.           <el-button
    22.             @click="edit(scope.row)"
    23.             type="primary"
    24.             icon="el-icon-edit"
    25.             circle
    26.             size="mini"
    27.           >el-button>
    28.           <el-button
    29.             @click="del(scope.row)"
    30.             type="danger"
    31.             icon="el-icon-delete"
    32.             circle
    33.             size="mini"
    34.           >el-button>
    35.         template>
    36.       el-table-column>
    37.     el-table>div>
    38.   template>
    39.   
    40.   <script>
    41.   import {  getTableData } from '@/utils/table.js'
    42.   export default {
    43.     data(){
    44.       return{
    45.         tableData: []
    46.       }
    47.     },
    48.     created(){
    49.       getTableData(this, '/works', {} , ['completed'])
    50.     }
    51.   }
    52.   script>
    53.   
    54.   <style>
    55.   
    56.   style>
    1. //请假列表的 表格数据获取 封装方法的处理
    2. export function getTableData(root, url, params, arr ){
    3.     root.service.get(url, { params: params || {} })
    4.     .then(res => {
    5.         if(res.data.status === 200 ){
    6.             root.tableData = res.data.data
    7.             root.total = res.total
    8.             root.tableData.map(item =>  {
    9.                 arr.map(aItem => [
    10.                     item[aItem] ? item[aItem + '_text'] = '已批准' : item[aItem + '_text'] = '未批准'
    11.                 ])
    12.             })
    13.         }
    14.     })
    15.     .catch((error) => {
    16.         throw error;
    17.     });
    18. }

    数据加载动画        ——      使用官方文档

    指令方式： 服务方式：

     后端实现分页

     查看请求后端接口：发现需要两个参数——当页数和每页条数

     前端的方法是用公式计算，参考博文

     这里用后端的方法：分页由后端完成，所以每次切换页面的数据条数和当前页码时，都要根据接口请求参数，发送请求。

    debug：总条数和数据页码不显示。 

    修改添加scss样式后：

    1. <template>
    2.   <div class="absenceList">
    3.     <el-table
    4.       :data="tableData"
    5.       height="450"
    6.       border
    7.       style="width: 100%"
    8.       :default-sort="{ prop: 'number', order: 'Ascending' }"
    9.       v-loading="loading"
    10.       element-loading-text="拼命加载ing"
    11.       element-loading-spinner="el-icon-loading"
    12.       element-loading-background="rgba(0, 0, 0, 0.8)"
    13.     >
    14.       
    15.       <el-table-column type="selection" width="55"> el-table-column>
    16.       <el-table-column prop="id" label="用户ID" align="center">
    17.       el-table-column>
    18.       <el-table-column prop="userId" label="所属班级" align="center">
    19.       el-table-column>
    20.       <el-table-column prop="title" label="请假理由" align="center" sortable>
    21.       el-table-column>
    22.       <el-table-column prop="completed_text" label="批准情况" align="center">
    23.       el-table-column>
    24.       <el-table-column fixed="right" label="操作" width="100" align="center">
    25.         <template slot-scope="scope">
    26.           <el-button
    27.             @click="edit(scope.row)"
    28.             type="primary"
    29.             icon="el-icon-edit"
    30.             circle
    31.             size="mini"
    32.           >el-button>
    33.           <el-button
    34.             @click="del(scope.row)"
    35.             type="danger"
    36.             icon="el-icon-delete"
    37.             circle
    38.             size="mini"
    39.           >el-button>
    40.         template>
    41.       el-table-column>
    42.     el-table>
    43.     <el-pagination
    44.       @size-change="handleSizeChange"
    45.       @current-change="handleCurrentChange"
    46.       :current-page="currentPage"
    47.       :page-sizes="[5, 10, 20, 50, 100]"
    48.       :page-size="pageSize"
    49.       layout="total, sizes, prev, pager, next, jumper"
    50.       :total="total"
    51.     >
    52.     el-pagination>
    53.   div>
    54. template>
    55. <script>
    56. import { getTableData } from "@/utils/table.js";
    57. export default {
    58.   data() {
    59.     return {
    60.       tableData: [],
    61.       total: 0,
    62.       currentPage: 1,
    63.       pageSize: 10,
    64.       loading: true, //加载动画
    65.     };
    66.   },
    67.   created() {
    68.     getTableData(this, "/works", { page: this.currentPage, size: this.pageSize }, ["completed"]);
    69.   },
    70.   methods: {
    71.     handleSizeChange(val) {
    72.       this.pageSize = val;
    73.       this.currentPage = 1;
    74.       getTableData(this, "/works", { page: this.currentPage, size: val }, ["completed"]);
    75.     },
    76.     handleCurrentChange(val) {
    77.       this.currentPage = val;
    78.       getTableData(this, "/works", { page: val, size: this.pageSize }, ["completed"]);
    79.     },
    80.   },
    81. };
    82. script>
    83.  
    84. <style lang="scss">
    85. .absenceList{
    86.   .el-pagination{
    87.     text-align: left;
    88.     margin-top: 20px;
    89.   }
    90. }
    91. style>
    1. //请假列表的 表格数据获取 封装方法的处理
    2. export function getTableData(root, url, params, arr ){
    3.     root.service.get(url, { params: params || {} })
    4.     .then(res => {
    5.         if(res.data.status === 200 ){
    6.             root.tableData = res.data.data
    7.             root.total = res.data.total
    8.             root.tableData.map(item =>  {
    9.                 arr.map(aItem => [
    10.                     item[aItem] ? item[aItem + '_text'] = '已批准' : item[aItem + '_text'] = '未批准'
    11.                 ])
    12.             })
    13.             root.loading = false
    14.         }
    15.     })
    16.     .catch((error) => {
    17.         throw error;
    18.     });
    19. }

    后端分页组件封装和复用

     在common文件夹下，新建Pagin.vue组件，把上一个页面与分页相关的代码复制过来，修改后如下：

    1. <template>
    2.   <div class="pagination">
    3.     <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
    4.       :page-sizes="[5, 10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
    5.       :total="total" :url="url">
    6.     el-pagination>
    7.   div>
    8. template>
    9.  
    10. <script>
    11. import { getTableData } from "@/utils/table.js";
    12. export default {
    13.   props: {
    14.     total: Number,
    15.     url: String,
    16.   },
    17.   data() {
    18.     return {
    19.       currentPage: 1,
    20.       pageSize: 10,
    21.     };
    22.   },
    23.   created() {
    24.     getTableData(
    25.       this.$parent,
    26.       this.url,
    27.       { page: this.currentPage, size: this.pageSize },
    28.       ["completed"]
    29.     );
    30.   },
    31.   methods: {
    32.     handleSizeChange(val) {
    33.       this.pageSize = val;
    34.       this.currentPage = 1;
    35.       getTableData(
    36.         this.$parent,
    37.         this.url,
    38.         { page: this.currentPage, size: val },
    39.         ["completed"]
    40.       );
    41.     },
    42.     handleCurrentChange(val) {
    43.       this.currentPage = val;
    44.       getTableData(this.$parent, this.url, { page: val, size: this.pageSize }, [
    45.         "completed",
    46.       ]);
    47.     },
    48.   },
    49. };
    50. script>
    51.  
    52. <style lang="scss">
    53. .pagination {
    54.   .el-pagination {
    55.     text-align: left;
    56.     margin-top: 20px;
    57.   }
    58. }
    59. style>

    使用组件化的思想，封装分页组件， 需要注意的点：

            1、只保留与分页本身功能相关的参数

             2、发送后端请求的参数 ===>父组件根节点以及传递的url

     分页组件复用：

     AbsenceListsManage.vue

    1. <template>
    2.   <div class="absenceListsManage">
    3.     <el-table
    4.       :data="tableData"
    5.       height="450"
    6.       border
    7.       style="width: 100%"
    8.       :default-sort="{ prop: 'number', order: 'Ascending' }"
    9.       v-loading="loading"
    10.       element-loading-text="拼命加载ing"
    11.       element-loading-spinner="el-icon-loading"
    12.       element-loading-background="rgba(0, 0, 0, 0.8)"
    13.     >
    14.       
    15.       <el-table-column type="selection" width="55"> el-table-column>
    16.       <el-table-column prop="id" label="用户ID" align="center">
    17.       el-table-column>
    18.       <el-table-column prop="userId" label="所属班级" align="center">
    19.       el-table-column>
    20.       <el-table-column prop="title" label="请假理由" align="center" sortable>
    21.       el-table-column>
    22.       <el-table-column prop="completed_text" label="批准情况" align="center">
    23.       el-table-column>
    24.       <el-table-column fixed="right" label="操作" width="100" align="center">
    25.         <template slot-scope="scope">
    26.           <el-button
    27.             @click="edit(scope.row)"
    28.             type="primary"
    29.             icon="el-icon-edit"
    30.             circle
    31.             size="mini"
    32.           >el-button>
    33.           <el-button
    34.             @click="del(scope.row)"
    35.             type="danger"
    36.             icon="el-icon-delete"
    37.             circle
    38.             size="mini"
    39.           >el-button>
    40.         template>
    41.       el-table-column>
    42.     el-table>
    43.     <Paging :total="total" :url="url">Paging>
    44.   div>
    45. template>
    46. <script>
    47. import Paging from "../common/Paging.vue";
    48. export default {
    49.   components: {
    50.     Paging,
    51.   },
    52.   data() {
    53.     return {
    54.       tableData: [],
    55.       total: 0,
    56.       loading: true, //加载动画
    57.       url: "/works",
    58.     };
    59.   },
    60. };
    61. script>
    62.  
    63. <style lang="scss">
    64. .absenceListsManage {
    65.   .el-pagination {
    66.     text-align: left;
    67.     margin-top: 20px;
    68.   }
    69. }
    70. style>

    使用组件化后最后效果一样，代码可读性更强。 

  • 相关阅读:
    2022年最新山东建筑八大员（材料员）模拟真题及答案
    【JDBC篇】java连接mysql数据库过程原理剖析（一）
    目前安卓、鸿蒙、澎湃的关系
    带网络变压器的RJ45网口连接器/集成RJ45网口连接器
    按照指定条件对数据进行分组并对每个分组内的全部数据应用自定义函数进行聚合计算groupby().apply()
    vue + el-checkbox 单选功能
    Java使用HttpClient实现远程服务调用
    IIC协议
    缓存P27，28，29
    【MATLAB源码-第43期】基于matlab的turbo码误码率仿真比较不同迭代次数，采用logmap/sova算法。
  • 原文地址：https://blog.csdn.net/qq_45947664/article/details/128188863