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

已于 2022-12-06 23:35:32 修改
阅读量516 收藏
点赞数
分类专栏： 通用后台管理系统前端界面 vue3学习 前端学习笔记 文章标签： vue.js elementui javascript
于 2022-12-05 23:35:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45947664/article/details/128188863
版权

请假列表

 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>

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

念衢
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
java分页模块复用性高,一个可复用的vue分页组件
weixin_33897085的博客
03-09 123
不废话，先上组件文件pages.vue:上一页......下一页export default{name: 'pages',props: {//总页数total: {type: [Number, String],required: true},//当前页now: {type: [Number, String],default: 1}},data() {return {//当前页pageNow: th...
封装el-table 带多级表头,集成表格分页与导出的功能,
狼丶宇先森的网络科技空间
09-30 1853
写在前面 用了element-ui的小伙伴们都应该知道,官方给的案例中,el-table是最简单的,未经过二次封装写起来肯定是如下: <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </
vue3组件封装系列-表格及分页
最新发布
sha虫剂的博客
04-23 824
第二弹来了，不知道有多少人是看过我的第一篇文章的，今天本来是没想更新的，但是现在项目正在验收期准备上线，闲着还不如来发发文。虽然这两天可能会高产，下一次高产就不知道是什么时候了。话不多说，先上图。上面就是效果图了，基于觉得还行的可以继续看下去。
如何二次封装一个el-table组件并二次复用
weixin_53818172的博客
07-16 2110
使用的是vue3和element+进行二次封装的。
vue基于ElementUI二次封装Table+分页
weixin_42301688的博客
03-21 1210
话不多说直接上代码，首先我们先封装el-table组件，里面的item都是日常用到的基本el-table-column，对于复杂的el-table-column 我们可以定义插槽进行自定义扩展。这是date里的数据，type:'selection' 是表单多选checkbox，formatter是定义每列数据的格式化，slot则是定义的具名插槽，这里的name:"action"要和上面的slot="action"保持一致。具体如何使用呢，我这里也把几个场景的代码贴出来，这里是methods代码。
element ui table组件复用
qq_42852004的博客
05-13 1522
怎么实现element ui中el-table的复用 思路分析利用v-for来循环渲染加载el-table-column 需要具备的知识点：（1）v-for循环 （2） 父传子数据 步骤一： 先封装一个table可以引入到其他父组件中 <!--table子组件封装--> <template> <el-table :data="value.tableData" ...
将angular-ui的分页组件封装成指令的方法详解
08-30
在本文中，我们将深入探讨如何将Angular UI的分页组件封装成自定义指令，这对于在AngularJS应用中实现可复用的分页功能至关重要。AngularJS的分页组件可以帮助我们处理大量数据，提供良好的用户体验。以下是详细的...
Vue开发之封装分页组件与使用示例
10-17
在Vue.js应用中，封装分页组件是一种常见的做法，它能提高代码的可复用性和模块化程度。这里我们将深入探讨如何在Vue中封装一个基于Element UI库的分页组件，并展示其使用方法。 首先，Element UI是一个流行的前端...
小程序分页实践之编写可复用分页组件
12-09
项目中遇到 tab切换列表，每个tab都需要分页的需求，分页流程具有相似性，于是想将分页封装为组件，方便应用。 组件的应用已写成一个小demo，效果如下图所示（数据用mock模拟）： 源码可以查看：wxapp-pagination ...
基于Vue如何封装分页组件
08-31
在Vue.js框架中，封装组件是一种常见的做法，可以提高代码的可重用性和模块化。分页组件是Web应用中非常常见的...通过这种方式，你可以构建一个可复用、可维护的分页组件，提高开发效率，同时保持代码的整洁和模块化。
基于Vue.js的表格分页组件
10-22
- **组件**：表格和分页都可以封装成独立的组件，通过props传递数据和方法，提高代码复用性。 - **生命周期钩子**：如`created`、`mounted`等，可以在组件不同阶段执行特定任务，如初始化数据或设置分页状态。 为了...
基于antdv封装的特殊复杂表格，带通行描述信息、可展示通行的单元格信息、可跨页选择数据功能、分页功能、可编辑单元格功能
艾小逗
06-29 2179
1. 可展示通行的单元格信息2. 可跨页选择数据功能3. 表单插槽、合计插槽、操作按钮区插槽4. 分页功能5. 接口内请求api6. 可编辑单元格7. 表格组件暴漏出的方法：查询、获取选中数据、接口返回数据、当前表格数据【设置可编辑单元格时获取数据】
SpringBoot实现分页查询
热门推荐
CoCo629vanilla的博客
03-29 1万+
前言
element-ui表格|分页封装
lipenghao111的博客
09-18 189
【代码】element-ui表格|分页封装。
vue 记住密码功能
小绵羊的博客
08-09 1701
<el-checkbox class="dl-jzmm" v-model="isChecked">记住密码</el-checkbox> data () { return { isChecked:false, } }, mounted() { this.getCookie(); }, methods:{ logi...
解决微信小程序解析不了data里面的数据res.data
lixiangfei4的博客
02-25 6468
微信小程序返回数据不能解析wx.request请求 wx.request({ url: utils.mivieUrl, timeout:5000, dataType: JSON, //返回的数据格式 method:'GET', header:{ 'content-type': 'json' }, ...
vue入门
看风听雨
12-22 796
什么是VUE？ Vue.js（读音 /vjuː/, 类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据...
使用elementUI组件实现表格的分页以及搜索功能
m0_69983788的博客
08-09 9964
使用elementUI组件实现表格的分页以及搜索功能，主要的UI组件：el-input、el-table、el-pagination
avue学习总结
qq_37517486的博客
07-21 2309
avue是基于element-ui二次封装的前端UI组件，需要有element-ui熟悉的基础。下图中列举一些常用的属性（官方文档说明不详细）
vue 分页组件复用
08-26
总结来说，Vue分页组件的复用可以通过封装分页逻辑和样式，使用props属性接收父组件传递的数据和事件来实现。这样我们可以在不同的页面中使用相同的分页组件，提高代码的复用性和开发效率。 <span class="em">1...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

念衢

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值