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

news2024/9/20 8:12:29

请假列表

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

<template>
    <div> <el-table
      :data="tableData"
      height="450"
      border
      style="width: 100%"
      :default-sort="{ prop: 'number', order: 'Ascending' }"
    >
      <!-- <el-table-column prop="id" label="序号" align="center"></el-table-column> -->
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="用户ID" align="center">
      </el-table-column>
      <el-table-column prop="userId" label="所属班级" align="center">
      </el-table-column>
      <el-table-column prop="title" label="请假理由" align="center" sortable>
      </el-table-column>
      <el-table-column prop="completed" label="批准情况" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            @click="edit(scope.row)"
            type="primary"
            icon="el-icon-edit"
            circle
            size="mini"
          ></el-button>
          <el-button
            @click="del(scope.row)"
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
          ></el-button>
        </template>
      </el-table-column>
    </el-table></div>
  </template>
  
  <script>
  import {  getTableData } from '@/utils/table.js'
  export default {
    data(){
      return{
        tableData: []
      }
    },
    created(){
      getTableData(this, '/works')
    }
  }
  </script>
  
  <style>
  
  </style>

 table.js

//请假列表的 表格数据获取 封装方法的处理
export function getTableData(root, url, params ){
    root.service.get(url, { params: params || {} })
    .then(res => {
        if(res.data.status === 200 ){
            root.tableData = res.data.data
            root.total = res.total
        }
    })
    .catch((error) => {
        throw error;
    });
}

2、数据转换

共两层遍历：

1、获取数据对象——user

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

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

<template>
    <div> <el-table
      :data="tableData"
      height="450"
      border
      style="width: 100%"
      :default-sort="{ prop: 'number', order: 'Ascending' }"
    >
      <!-- <el-table-column prop="id" label="序号" align="center"></el-table-column> -->
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="用户ID" align="center">
      </el-table-column>
      <el-table-column prop="userId" label="所属班级" align="center">
      </el-table-column>
      <el-table-column prop="title" label="请假理由" align="center" sortable>
      </el-table-column>
      <el-table-column prop="completed_text" label="批准情况" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            @click="edit(scope.row)"
            type="primary"
            icon="el-icon-edit"
            circle
            size="mini"
          ></el-button>
          <el-button
            @click="del(scope.row)"
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
          ></el-button>
        </template>
      </el-table-column>
    </el-table></div>
  </template>
  
  <script>
  import {  getTableData } from '@/utils/table.js'
  export default {
    data(){
      return{
        tableData: []
      }
    },
    created(){
      getTableData(this, '/works', {} , ['completed'])
    }
  }
  </script>
  
  <style>
  
  </style>
//请假列表的 表格数据获取 封装方法的处理
export function getTableData(root, url, params, arr ){
    root.service.get(url, { params: params || {} })
    .then(res => {
        if(res.data.status === 200 ){
            root.tableData = res.data.data
            root.total = res.total
            root.tableData.map(item =>  {
                arr.map(aItem => [
                    item[aItem] ? item[aItem + '_text'] = '已批准' : item[aItem + '_text'] = '未批准'
                ])
            })
        }
    })
    .catch((error) => {
        throw error;
    });
}

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

指令方式： 服务方式：

 后端实现分页

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

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

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

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

修改添加scss样式后：

<template>
  <div class="absenceList">
    <el-table
      :data="tableData"
      height="450"
      border
      style="width: 100%"
      :default-sort="{ prop: 'number', order: 'Ascending' }"
      v-loading="loading"
      element-loading-text="拼命加载ing"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <!-- <el-table-column prop="id" label="序号" align="center"></el-table-column> -->
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="用户ID" align="center">
      </el-table-column>
      <el-table-column prop="userId" label="所属班级" align="center">
      </el-table-column>
      <el-table-column prop="title" label="请假理由" align="center" sortable>
      </el-table-column>
      <el-table-column prop="completed_text" label="批准情况" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            @click="edit(scope.row)"
            type="primary"
            icon="el-icon-edit"
            circle
            size="mini"
          ></el-button>
          <el-button
            @click="del(scope.row)"
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { getTableData } from "@/utils/table.js";
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      loading: true, //加载动画
    };
  },
  created() {
    getTableData(this, "/works", { page: this.currentPage, size: this.pageSize }, ["completed"]);
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      getTableData(this, "/works", { page: this.currentPage, size: val }, ["completed"]);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      getTableData(this, "/works", { page: val, size: this.pageSize }, ["completed"]);
    },
  },
};
</script>

<style lang="scss">
.absenceList{
  .el-pagination{
    text-align: left;
    margin-top: 20px;
  }
}
</style>

//请假列表的 表格数据获取 封装方法的处理
export function getTableData(root, url, params, arr ){
    root.service.get(url, { params: params || {} })
    .then(res => {
        if(res.data.status === 200 ){
            root.tableData = res.data.data
            root.total = res.data.total
            root.tableData.map(item =>  {
                arr.map(aItem => [
                    item[aItem] ? item[aItem + '_text'] = '已批准' : item[aItem + '_text'] = '未批准'
                ])
            })
            root.loading = false
        }
    })
    .catch((error) => {
        throw error;
    });
}

后端分页组件封装和复用

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

<template>
  <div class="pagination">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total" :url="url">
    </el-pagination>
  </div>
</template>

<script>
import { getTableData } from "@/utils/table.js";
export default {
  props: {
    total: Number,
    url: String,
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
    };
  },
  created() {
    getTableData(
      this.$parent,
      this.url,
      { page: this.currentPage, size: this.pageSize },
      ["completed"]
    );
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      getTableData(
        this.$parent,
        this.url,
        { page: this.currentPage, size: val },
        ["completed"]
      );
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      getTableData(this.$parent, this.url, { page: val, size: this.pageSize }, [
        "completed",
      ]);
    },
  },
};
</script>

<style lang="scss">
.pagination {
  .el-pagination {
    text-align: left;
    margin-top: 20px;
  }
}
</style>

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

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

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

 分页组件复用：

 AbsenceListsManage.vue

<template>
  <div class="absenceListsManage">
    <el-table
      :data="tableData"
      height="450"
      border
      style="width: 100%"
      :default-sort="{ prop: 'number', order: 'Ascending' }"
      v-loading="loading"
      element-loading-text="拼命加载ing"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <!-- <el-table-column prop="id" label="序号" align="center"></el-table-column> -->
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="用户ID" align="center">
      </el-table-column>
      <el-table-column prop="userId" label="所属班级" align="center">
      </el-table-column>
      <el-table-column prop="title" label="请假理由" align="center" sortable>
      </el-table-column>
      <el-table-column prop="completed_text" label="批准情况" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            @click="edit(scope.row)"
            type="primary"
            icon="el-icon-edit"
            circle
            size="mini"
          ></el-button>
          <el-button
            @click="del(scope.row)"
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <Paging :total="total" :url="url"></Paging>
  </div>
</template>
<script>
import Paging from "../common/Paging.vue";
export default {
  components: {
    Paging,
  },
  data() {
    return {
      tableData: [],
      total: 0,
      loading: true, //加载动画
      url: "/works",
    };
  },
};
</script>

<style lang="scss">
.absenceListsManage {
  .el-pagination {
    text-align: left;
    margin-top: 20px;
  }
}
</style>

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/64891.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

亚像素级精确度的角点

亚像素级精确度的角点

有时我们需要最大精度的角点检测。OpenCV为我们提供了函cv2.cornerSubPix()&#xff0c; 它可以提供亚像素级别的角点检测。下面是一个例子。首先我们要找到 Harris 角点&#xff0c;然后将角点的重心传给这个函数进行修正。Harris 角点用红色像素标出&#xff0c;绿色像素是修…
阅读更多...
[附源码]计算机毕业设计社区疫情防控信息管理系统Springboot程序

[附源码]计算机毕业设计社区疫情防控信息管理系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
jdk11新特性——新加的一些更实用的API

jdk11新特性——新加的一些更实用的API

目录一、集合 增强1.1、List集合 of()方法1.2、Set集合 of()方法1.3、Map集合 of()方法1.4、List集合copyOf()方法1.5、of()和copyOf()方法创建集合的注意事项二、Stream 增强2.1、Stream 新增of()方法2.2、Stream 新增ofNullable()方法2.3、Stream 新增takeWhile() 和 dropWhi…
阅读更多...
[附源码]Python计算机毕业设计Django网文论坛管理系统

[附源码]Python计算机毕业设计Django网文论坛管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
torchnet简介

torchnet简介

前言 最近项目开发过程中遇到了torchnet.metertorchnet.metertorchnet.meter来记录模型信息&#xff0c;搜了好多篇博客&#xff0c;都潦草草没有一点干货。于是参考了官方文档以及参考代码&#xff0c;根据自己的理解&#xff0c;在此做了一个其的使用教程&#xff1a; torc…
阅读更多...
flink1.13.2 Streaming File Sink产生大量orc小文件的问题解决方案

flink1.13.2 Streaming File Sink产生大量orc小文件的问题解决方案

Orc小文件合并问题 Orc小文件合并问题 现象：hdfs中出现大量ORC小文件 1.1. 已经映射为hive表ORC小文件合并 1.1.1. 非分区表 alter table 表名 concatenate; 示例： alter table ods_lxy_demo concatenate; 注意：可多次重复执行，每执行一次就会做一次文件合并，执行多次最终…
阅读更多...
gitee/github上传远程仓库错误usage: git remote add [＜options＞] ＜name＞ ＜url＞

gitee/github上传远程仓库错误usage: git remote add [＜options＞] ＜name＞ ＜url＞

gitee/github上传远程仓库错误gitee/github上传远程仓库错误错误截图版本错误出现时间错误检查及解决1.网址中含有空格2.关闭翻译软件3.git bash自身问题gitee/github上传远程仓库错误 不知道大家最近有没有碰到这个错误usage: git remote add [<options>] <name>…
阅读更多...
[附源码]计算机毕业设计JAVA疫情防控期间网上教学管理

[附源码]计算机毕业设计JAVA疫情防控期间网上教学管理

[附源码]计算机毕业设计JAVA疫情防控期间网上教学管理 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM…
阅读更多...
Uniapp云开发（Uniapp入门）

Uniapp云开发（Uniapp入门）

前言&#xff1a; 今天这篇文章主要讲解的是Uniapp云开发基础&#xff0c;有了Uniapp云开发&#xff0c;我们就不用需要后端&#xff0c;前端自己就可以实现增删改查。还有就是案例很重要&#xff0c;一定要看&#xff0c;自己去尝试运行试试。 目录超详细一. 什么是Uniapp云开…
阅读更多...
分布式配置中心Apollo

分布式配置中心Apollo

Apollo&#xff08;阿波罗&#xff09;是携程框架部门研发的分布式配置中心&#xff0c;能够集中化管理应用不同环境、不同集群的配置&#xff0c;配置修改后能够实时推送到应用端&#xff0c;并且具备规范的权限、流程治理等特性&#xff0c;适用于微服务配置管理场景。 服务…
阅读更多...
【Python百日进阶-数据分析】Day326 - plotly.express.scatter_geo():地理散点图

【Python百日进阶-数据分析】Day326 - plotly.express.scatter_geo():地理散点图

文章目录一、scatter_geo语法二、参数三、返回类型四、实例4.1 常规地理散点图4.2自定义地理散点图4.3GeoPandas 的基本示例一、scatter_geo语法 plotly.express.scatter_geo(data_frame None ,lat None ,lon None ,locations None ,locationmode None ,geojson None , …
阅读更多...
MuziDB数据库-0.项目描述

MuziDB数据库-0.项目描述

前言 该项目写完也有一段时间了&#xff0c;为了避免以后忘记该项目的一些实现的原理&#xff0c;所以写下这篇博客来记录一下该项目的设计等 项目整体 MuziDB分为前端与后端&#xff0c;前后端交互通过socket进行交互&#xff0c;前端的作用就是读取用户输入并发送到后端进…
阅读更多...
mybatis开发要点-insert主键ID获取和多参数传递

mybatis开发要点-insert主键ID获取和多参数传递

1.2、代码示例 二、查询如何传入多个参数 1、使用map传递参数&#xff1b; 2、使用注解传递参数&#xff1b; 3、使用Java Bean的方式传递参数&#xff1b; 一、插入数据主键ID获取 一般我们在做业务开发时&#xff0c;经常会遇到插入一条数据并使用到插入数据的ID情况。如…
阅读更多...
网络安全事件应急演练方案

网络安全事件应急演练方案

文章目录1 总则1.1 应急演练定义1.2 应急演练目的1.3 应急演练原则1.4 应急演练分类1.4.1 按组织形式划分1.4.2 按内容划分1.4.3 按目的与作用划分1.4.4 按组织范围划分1.5 应急演练规划2 应急演练组织机构2.1 组织单位2.1.1 领导小组2.1.2 策划小组2.1.3 保障小组2.1.4 评估小…
阅读更多...
jvm参数造成http请求Read time out

jvm参数造成http请求Read time out

问题描述 线上部署的代码&#xff0c;部署在测试环境突然抛出接口请求Read time out的异常。查看线上日志&#xff0c;接口请求正常。重新启动&#xff0c;部署测试环境代码都没有效果&#xff0c;接口还是必现Read time out。 原因分析&#xff1a; 1. 排查网络原因 直接在…
阅读更多...
内核开发-同步场景与概念

内核开发-同步场景与概念

进程上下文执行环境还有中断上下文执行环境&#xff0c;并且中断上下文优先级比较高&#xff0c;可以随时打断进程的执行&#xff0c;因此情况更加复杂。内核当中提供了不同的同步机制。比如说信号量&#xff0c;自旋锁&#xff0c;rcu&#xff0c;原子变量等等。他们各自都有自…
阅读更多...
《计算机视觉技术与应用》-----第六章 直方图

《计算机视觉技术与应用》-----第六章 直方图

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目…
阅读更多...
软件过程模型

软件过程模型

软件过程软件过程:获得高质量软件的一系列任务框架瀑布模型:特点:顺序,依赖,推迟实现,质量保证优点:规范方法,规定文档,阶段质量验证缺点:开发初期困难,需求验证困难,难以维护快速原型优点:满足需求,线性过程缺点:设计困难,原型理解不同,不利于创新增量模型:优点:短时间可完成部…
阅读更多...
[附源码]Python计算机毕业设计SSM健身房管理系统设计（程序+LW)

[附源码]Python计算机毕业设计SSM健身房管理系统设计（程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
[附源码]Python计算机毕业设计Django体育馆场地预约管理系统

[附源码]Python计算机毕业设计Django体育馆场地预约管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023