• 通用后台管理系统前端界面Ⅸ——数据表格渲染及处理+前端分页

    数据表格渲染

    1、找

    在页面添加table表格，从element-ui官网查找，包括数据一起复制过来，查看显示没有问题后，把tableData清空为空数组。

    1. <template>
    2.   <div>
    3.     <el-table :data="tableData" height="auto" border style="width: 100%">
    4.       <el-table-column prop="date" label="日期" width="180"> el-table-column>
    5.       <el-table-column prop="name" label="姓名" width="180"> el-table-column>
    6.       <el-table-column prop="address" label="地址"> el-table-column>
    7.     el-table>
    8.   div>
    9. template>
    10.  
    11. <script>
    12. export default {
    13.   data() {
    14.     return {
    15.       tableData: [],
    16.     };
    17.   },
    18. };
    19. script>
    20.  
    21. <style>style>

    2、请求数据接口

    根据接口，修改api.js文件：请求方法、地址、参数，并将接口暴露出来。

    1. // 把对应的接口请求封装成api来调用
    2. import service from '../service'
    3. // import qs from 'qs'
    4.  
    5. // 登录接口
    6. export function login(data) {
    7.     return service({
    8.         method: 'post',
    9.         url: '/login',
    10.         data
    11.     })
    12. }
    13.  
    14. //列表查询接口
    15. export function students(param){
    16.     return{
    17.         method: 'get',
    18.         url: '/students',
    19.         param
    20.     }
    21. }

     3、在渲染页面前发送请求

    1. <template>
    2.   <div>
    3.     <el-table :data="tableData" height="auto" border style="width: 100%">
    4.       <el-table-column prop="date" label="日期" width="180"> el-table-column>
    5.       <el-table-column prop="name" label="姓名" width="180"> el-table-column>
    6.       <el-table-column prop="address" label="地址"> el-table-column>
    7.     el-table>
    8.   div>
    9. template>
    10.  
    11. <script>
    12. import { students } from '@/api/api.js'
    13. export default {
    14.   data() {
    15.     return {
    16.       tableData: [],
    17.     };
    18.   },
    19.   created() {
    20.     this.getData()
    21.   },
    22.   methods: {
    23.     getData(params){
    24.       students(params)
    25.       .then((res) => {
    26.         console.log(res.data)
    27.       });
    28.     }
    29.   }
    30. };
    31. script>
    32.  
    33. <style>style>

     此时调试出现的问题：（只修改2处也是可以的）

    api.js 

    1. // 把对应的接口请求封装成api来调用
    2. import service from '../service'
    3. // import qs from 'qs'
    4.  
    5. // 登录接口
    6. export function login(data) {
    7.     return service({
    8.         method: 'post',
    9.         url: '/login',
    10.         data
    11.     })
    12. }
    13.  
    14. //列表查询接口
    15. export function students(param){
    16.     return service({
    17.         method: 'get',
    18.         url: '/students',
    19.         param
    20.     })
    21. }

    打印返回的数据结果：

     修改页面表头，渲染返回的数据：

    1、表头prop属性值一定要和返回来的数据的key相同，否则渲染不出来

    eg：

    2、样式修改（小技巧）

     修改前：

    修改后：滚动条消失

    1. <template>
    2.   <div>
    3.     <el-table :data="tableData" height="auto" border style="width: 100%">
    4.       <el-table-column prop="id" label="序号"  align="center"> el-table-column>
    5.       <el-table-column prop="name" label="姓名" align="center"> el-table-column>
    6.       <el-table-column prop="sex" label="性别" align="center"> el-table-column>
    7.       <el-table-column prop="age" label="年龄" align="center"> el-table-column>
    8.       <el-table-column prop="number" label="学号" align="center">
    9.       el-table-column>
    10.       <el-table-column prop="class" label="班级" align="center"> el-table-column>
    11.       <el-table-column prop="status" label="状态" align="center">
    12.       el-table-column>
    13.       <el-table-column prop="address" label="地址" align="center">
    14.       el-table-column>
    15.       <el-table-column prop="phone" label="联系方式" align="center">
    16.       el-table-column>
    17.       <el-table-column fixed="right" label="操作" align="center">
    18.         <template slot-scope="scope">
    19.           <el-button
    20.             @click="handleClick(scope.row)"
    21.             icon="el-icon-delete"
    22.             type="danger"
    23.             size="small"
    24.             circle
    25.           >el-button>
    26.           <el-button type="primary" icon="el-icon-edit" circle>el-button>
    27.         template>
    28.       el-table-column>
    29.     el-table>
    30.   div>
    31. template>
    32.  
    33. <script>
    34. import { students } from "@/api/api.js";
    35. export default {
    36.   data() {
    37.     return {
    38.       tableData: [],
    39.     };
    40.   },
    41.   created() {
    42.     this.getData();
    43.   },
    44.   methods: {
    45.     getData(params) {
    46.       students(params).then((res) => {
    47.         console.log(res.data);
    48.       });
    49.     },
    50.     handleClick(row) {
    51.       console.log(row);
    52.     },
    53.   },
    54. };
    55. script>
    56.  
    57. <style>style>

    4、返回数据渲染到页面上

    将数据进行传递，动态直接渲染。

     但是这样写报错，如下：

    render===》渲染的时候出了问题，返回去找。

     分析返回的数据格式，打印：res.data  :

    而传递数据时：

     tableData是一个对象数组，而res.data是一个大群的对象数据，里面还有status和message、data等。真正是tableData的数据是res.data.data

     修改后：

    1. <template>
    2.   <div>
    3.     <el-table :data="tableData" height="450" border style="width: 100%">
    4.       <el-table-column prop="id" label="序号"  align="center"> el-table-column>
    5.       <el-table-column prop="name" label="姓名" align="center"> el-table-column>
    6.       <el-table-column prop="sex" label="性别" align="center"> el-table-column>
    7.       <el-table-column prop="age" label="年龄" align="center"> el-table-column>
    8.       <el-table-column prop="number" label="学号" align="center">
    9.       el-table-column>
    10.       <el-table-column prop="class" label="班级" align="center"> el-table-column>
    11.       <el-table-column prop="status" label="状态" align="center">
    12.       el-table-column>
    13.       <el-table-column prop="address" label="地址" align="center">
    14.       el-table-column>
    15.       <el-table-column prop="phone" label="联系方式" align="center">
    16.       el-table-column>
    17.       <el-table-column fixed="right" label="操作" align="center">
    18.         <template slot-scope="scope">
    19.           <el-button
    20.             @click="handleClick(scope.row)"
    21.             icon="el-icon-delete"
    22.             type="danger"
    23.             size="mini"
    24.             circle
    25.           >el-button>
    26.           <el-button type="primary" icon="el-icon-edit" size="mini" circle>el-button>
    27.         template>
    28.       el-table-column>
    29.     el-table>
    30.   div>
    31. template>
    32.  
    33. <script>
    34. import { students } from "@/api/api.js";
    35. export default {
    36.   data() {
    37.     return {
    38.       tableData: [],
    39.     };
    40.   },
    41.   created() {
    42.     this.getData();
    43.   },
    44.   methods: {
    45.     getData(params) {
    46.       students(params).then((res) => {
    47.         console.log(res.data);
    48.         if(res.data.status === 200){
    49.           this.tableData = res.data.data
    50.         }
    51.       });
    52.     },
    53.     handleClick(row) {
    54.       console.log(row);
    55.     },
    56.   },
    57. };
    58. script>
    59.  
    60. <style>style>

    效果：但是有些数据上显示的问题：性别应该是男或女，不是1或2

    表格数据处理——数据转换

    大部分系统开发文档里，定义的数据库里有些字段，是用是用数字代替某些意义的字符。

    eg：性别：1代表男，2代表女；

            图书管理系统的，书的状态码：1借出，2在馆内，3已损坏；

            校园管理系统，学生的状态码：1已入校，2未入校，3休学中

    以处理性别字段为代表的两种处理方式：

            1、在数据传递前，先进行转换，直接修改数据对象的属性值（原数据发生了变化而不推荐）

            2、在数据传递前，先新添加一个属性字段，修改新的属性字段，最后渲染的是新字段值

    如果要进行新增修改和删除的操作，本来从后端传过来的是1和2，发送请求回去也应该是1和2，而且一般会遵循接口的高复用性，发送请求回去的一般也是数据对象，所以尽量不要修改原数据。

     把状态码数据也进行转换一下后

    1. <template>
    2.   <div>
    3.     <el-table :data="tableData" height="450" border style="width: 100%">
    4.       <el-table-column prop="id" label="序号"  align="center"> el-table-column>
    5.       <el-table-column prop="name" label="姓名" align="center"> el-table-column>
    6.       <el-table-column prop="sex_text" label="性别" align="center"> el-table-column>
    7.       <el-table-column prop="age" label="年龄" align="center"> el-table-column>
    8.       <el-table-column prop="number" label="学号" align="center">
    9.       el-table-column>
    10.       <el-table-column prop="class" label="班级" align="center"> el-table-column>
    11.       <el-table-column prop="state_text" label="状态" align="center">
    12.       el-table-column>
    13.       <el-table-column prop="address" label="地址" align="center">
    14.       el-table-column>
    15.       <el-table-column prop="phone" label="联系方式" align="center">
    16.       el-table-column>
    17.       <el-table-column fixed="right" label="操作" align="center">
    18.         <template slot-scope="scope">
    19.           <el-button
    20.             @click="handleClick(scope.row)"
    21.             icon="el-icon-delete"
    22.             type="danger"
    23.             size="mini"
    24.             circle
    25.           >el-button>
    26.           <el-button type="primary" icon="el-icon-edit" size="mini" circle>el-button>
    27.         template>
    28.       el-table-column>
    29.     el-table>
    30.   div>
    31. template>
    32.  
    33. <script>
    34. import { students } from "@/api/api.js";
    35. export default {
    36.   data() {
    37.     return {
    38.       tableData: [],
    39.     };
    40.   },
    41.   created() {
    42.     this.getData();
    43.   },
    44.   methods: {
    45.     getData(params) {
    46.       students(params).then((res) => {
    47.         console.log(res.data);
    48.         if(res.data.status === 200){
    49.           this.tableData = res.data.data
    50.           this.tableData.forEach(item => {
    51.             item.sex === 1 ? item.sex_text = '男' : item.sex_text = '女'
    52.             item.state === '1' ? item.state_text = '已入校' : item.state === '2' ? item.state_text = '未入校' : item.state_text = '休学中'
    53.           })
    54.         }
    55.       });
    56.     },
    57.     handleClick(row) {
    58.       console.log(row);
    59.     },
    60.   },
    61. };
    62. script>
    63.  
    64. <style>style>

    前端分页功能实现

            分页操作的数据实际就是一个数组，那对数据进行分割的方法有哪些？那不同方法操作的核心就是找规律：每一页显示的是第几条数据到第几条数据。

    1、找

     2、复制引入，修改后使用

           ① 总条数功能：

    ②分页规律公式：

            前端使用slice方法：（当前页数-1）*每页条数 ，当前页数*每页条数

    在渲染数据前先对数据进行切片（此时是分页数字显示正确，但实际的分页功能还未实现）

            一：直接绑定：

            二：使用计算属性：

    1. <template>
    2.   <div class="InfoList">
    3.     
    4.     <el-table
    5.       :data="compData"
    6.       height="450"
    7.       border
    8.       style="width: 100%"
    9.       :default-sort="{ prop: 'number', order: 'Ascending' }"
    10.     >
    11.       
    12.       <el-table-column type="selection" width="55"> el-table-column>
    13.       <el-table-column prop="number" label="学号" align="center" sortable>
    14.       el-table-column>
    15.       <el-table-column prop="name" label="姓名" align="center">
    16.       el-table-column>
    17.       <el-table-column prop="sex_text" label="性别" align="center">
    18.       el-table-column>
    19.       <el-table-column prop="age" label="年龄" align="center" sortable>
    20.       el-table-column>
    21.       <el-table-column prop="class" label="班级" align="center">
    22.       el-table-column>
    23.       <el-table-column prop="state_text" label="状态" align="center">
    24.       el-table-column>
    25.       <el-table-column prop="address" label="地址" align="center">
    26.       el-table-column>
    27.       <el-table-column prop="phone" label="联系方式" align="center">
    28.       el-table-column>
    29.       <el-table-column fixed="right" label="操作" align="center">
    30.         <template slot-scope="scope">
    31.           <el-button
    32.             @click="handleClick(scope.row)"
    33.             icon="el-icon-delete"
    34.             type="danger"
    35.             size="mini"
    36.             circle
    37.           >el-button>
    38.           <el-button
    39.             type="primary"
    40.             icon="el-icon-edit"
    41.             size="mini"
    42.             circle
    43.           >el-button>
    44.         template>
    45.       el-table-column>
    46.     el-table>
    47.     <el-pagination
    48.       @size-change="handleSizeChange"
    49.       @current-change="handleCurrentChange"
    50.       :current-page="currentPage"
    51.       :page-sizes="[5, 10, 20, 30, 50]"
    52.       :page-size="pageSize"
    53.       layout="total, sizes, prev, pager, next, jumper"
    54.       :total="total"
    55.     >
    56.     el-pagination>
    57.   div>
    58. template>
    59.  
    60. <script>
    61. import { students } from "@/api/api.js";
    62. export default {
    63.   data() {
    64.     return {
    65.       tableData: [],
    66.       currentPage: 1, //当前页数
    67.       pageSize: 10, //每页显示条数
    68.       total: 0,
    69.     };
    70.   },
    71.   created() {
    72.     this.getData();
    73.   },
    74.   computed: {
    75.     compData(){
    76.       return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    77.     }
    78.   },
    79.   methods: {
    80.     handleSizeChange(val) {
    81.       this.pageSize = val;
    82.       this.currentPage = 1;
    83.     },
    84.     handleCurrentChange(val) {
    85.       this.currentPage = val;
    86.     },
    87.     getData(params) {
    88.       students(params).then((res) => {
    89.         console.log(res.data);
    90.         if (res.data.status === 200) {
    91.           this.total = res.data.total;
    92.           this.tableData = res.data.data;
    93.           this.tableData.forEach((item) => {
    94.             item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
    95.             item.state === "1"
    96.               ? (item.state_text = "已入校")
    97.               : item.state === "2"
    98.               ? (item.state_text = "未入校")
    99.               : (item.state_text = "休学中");
    100.           });
    101.         }
    102.       });
    103.     },
    104.     handleClick(row) {
    105.       console.log(row);
    106.     },
    107.   },
    108. };
    109. script>
    110.  
    111. <style lang="scss">
    112. .InfoList {
    113.   .el-pagination {
    114.     text-align: left;
    115.     margin-top: 20x;
    116.   }
    117. }
    118. style>

     

           ③ 改变每页条数功能（点击页码，正确跳转）

     ps：这里设定当每条条数改变时，当前页码会回到第一页。

    最后调整一下样式：左对齐，上边距

     最后InfoList.vue代码：

    1. <template>
    2.   <div class="InfoList">
    3.     
    4.     <el-table
    5.       :data="compData"
    6.       height="450"
    7.       border
    8.       style="width: 100%"
    9.       :default-sort="{ prop: 'number', order: 'Ascending' }"
    10.     >
    11.       
    12.       <el-table-column type="selection" width="55"> el-table-column>
    13.       <el-table-column prop="number" label="学号" align="center" sortable>
    14.       el-table-column>
    15.       <el-table-column prop="name" label="姓名" align="center">
    16.       el-table-column>
    17.       <el-table-column prop="sex_text" label="性别" align="center">
    18.       el-table-column>
    19.       <el-table-column prop="age" label="年龄" align="center" sortable>
    20.       el-table-column>
    21.       <el-table-column prop="class" label="班级" align="center">
    22.       el-table-column>
    23.       <el-table-column prop="state_text" label="状态" align="center">
    24.       el-table-column>
    25.       <el-table-column prop="address" label="地址" align="center">
    26.       el-table-column>
    27.       <el-table-column prop="phone" label="联系方式" align="center">
    28.       el-table-column>
    29.       <el-table-column fixed="right" label="操作" align="center">
    30.         <template slot-scope="scope">
    31.           <el-button
    32.             @click="handleClick(scope.row)"
    33.             icon="el-icon-delete"
    34.             type="danger"
    35.             size="mini"
    36.             circle
    37.           >el-button>
    38.           <el-button
    39.             type="primary"
    40.             icon="el-icon-edit"
    41.             size="mini"
    42.             circle
    43.           >el-button>
    44.         template>
    45.       el-table-column>
    46.     el-table>
    47.     <el-pagination
    48.       @size-change="handleSizeChange"
    49.       @current-change="handleCurrentChange"
    50.       :current-page="currentPage"
    51.       :page-sizes="[5, 10, 20, 30, 50]"
    52.       :page-size="pageSize"
    53.       layout="total, sizes, prev, pager, next, jumper"
    54.       :total="total"
    55.     >
    56.     el-pagination>
    57.   div>
    58. template>
    59.  
    60. <script>
    61. import { students } from "@/api/api.js";
    62. export default {
    63.   data() {
    64.     return {
    65.       tableData: [],
    66.       currentPage: 1, //当前页数
    67.       pageSize: 10, //每页显示条数
    68.       total: 0,
    69.     };
    70.   },
    71.   created() {
    72.     this.getData();
    73.   },
    74.   computed: {
    75.     compData(){
    76.       return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    77.     }
    78.   },
    79.   methods: {
    80.     handleSizeChange(val) {
    81.       this.pageSize = val;
    82.       this.currentPage = 1;
    83.     },
    84.     handleCurrentChange(val) {
    85.       this.currentPage = val;
    86.     },
    87.     getData(params) {
    88.       students(params).then((res) => {
    89.         console.log(res.data);
    90.         if (res.data.status === 200) {
    91.           this.total = res.data.total;
    92.           this.tableData = res.data.data;
    93.           this.tableData.forEach((item) => {
    94.             item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
    95.             item.state === "1"
    96.               ? (item.state_text = "已入校")
    97.               : item.state === "2"
    98.               ? (item.state_text = "未入校")
    99.               : (item.state_text = "休学中");
    100.           });
    101.         }
    102.       });
    103.     },
    104.     handleClick(row) {
    105.       console.log(row);
    106.     },
    107.   },
    108. };
    109. script>
    110.  
    111. <style lang="scss">
    112. .InfoList {
    113.   .el-pagination {
    114.     text-align: left;
    115.     margin-top: 20x;
    116.   }
    117. }
    118. style>

  • 相关阅读:
    【毕业设计】基于单片机的无接触测温枪 - MLX90614 红外测温仪 嵌入式 物联网 stm32
    2022年密码测评理论与关键技术前沿论坛｜海泰方圆分享密码应用改造典型方案
    C#开发的OpenRA游戏之游戏设计思路
    SAP SHDB(BDC)心得
    安卓主动发数据到uniapp界面
    如何在Linux下打包发布Qt程序？
    修改了Excel默认打开方式后仍然使用WPS打开的解决办法
    05-在Idea中编写Servlet程序
    数据结构题目收录（二十一）
    【C++】匿名对象 ① ( 匿名对象引入 | 匿名对象简介 | 匿名对象概念 | 匿名对象作用域 - 对象创建与销毁 )
  • 原文地址：https://blog.csdn.net/qq_45947664/article/details/127973791