首页 > 其他分享 >Vue利用slice()方法实现分页操作

Vue利用slice()方法实现分页操作

时间:2023-03-16 11:23:23浏览次数:52  
标签:Vue 分页 res 当前页 盘点 slice data

Vue利用slice()方法实现分页操作
https://blog.csdn.net/pleaseprintf/article/details/129187584

系列文章目录

提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
例如:第一章 Python 机器学习入门之pandas的使用


提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录


一、1. 思路 : 使用 slice()方法进行分页?

1-1. 拿到要分页的表格数据过后,获取到表格数据的长度,将表格数据的长度设置 为分页器里面的总条目数

this.total = this.pdDataList.length;

1-2. 让后在 分页器里面的 total 属性上进行绑定
1-3. 在 Vue 中的 data 里面设置 当前页和 当前条数: 即(currentPage 和 pagesize)

1-4. element-ui 中分页器为我们提供了两个事件:
size-change : 每页条数 改变时触发
current-change :当前页 改变时触发
1-5. 在 size-change 事件里面 将 data 中定义的 pagesize 的值进行改变
handleSizeChange(pageSize){
// pageSize 是当前选中的条数
this.pagesize = pageSize;
},
1-6. 在 current-change 事件里面将 data 中定义的 currentPage 的值进行改变
// 当前页改变时触发
handleCurrentChange(pageNum){
// pageNum 是当前点击的页码
this.currentPage = pageNum;
}
1-7. 然后在 表格数据绑定的时候利用 数组的 slice() 方法进行分页
:data=“pdDataList.slice((currentPage-1)pagesize,currentPagepagesize)”

二、使用步骤

1.表格区域

代码如下(示例):

      <el-table :data="pdDataList.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" border>
        <el-table-column type="index" align="center" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="PDNO" align="center" label="单号" width="180">
        </el-table-column>
        <el-table-column align="center" label="盘点状态" width="180">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.PDFREQ === 'A'">待盘点</el-tag>
            <el-tag type="warning" v-if="scope.row.PDFREQ === 'B'"
              >盘点中</el-tag
            >
            <el-tag v-if="scope.row.PDFREQ === 'C'">已提交</el-tag>
            <el-tag type="success" v-if="scope.row.PDFREQ === 'D'"
              >已结束</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="WARENO" align="center" label="仓码" width="180">
        </el-table-column>
        <el-table-column prop="STORENO" align="center" label="储位">
        </el-table-column>
        <el-table-column prop="MATNO" align="center" label="料号">
        </el-table-column>
        <el-table-column prop="SHOULD_START" align="center" label="开始时间">
        </el-table-column>
        <el-table-column prop="SHOULD_FINISH" align="center" label="截止时间">
        </el-table-column>
        <el-table-column prop="REAL_QTY" align="center" label="实盘">
        </el-table-column>
        <el-table-column prop="SHOULD_QTY" align="center" label="应盘">
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage" 
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

2.JS模块代码

代码如下(示例):

export default {
  data() {
    return {
      // 盘点清单的查询条件
      pdInfo: {
        plantno: "MAC1FTH", //工廠DB(必須)
        empno: "F3841014", //登錄工號(必須,不是賬號)
        workDate: "2022-5-14", //任務日期(必須)
        wareno: "", //倉碼
        storeno: "", //儲位
        matno: "", //料號(可模糊)
        pdstate: "", //盤點單狀態
      },
      stateList: [], // 盘点状态
      pdDataList: [], // 盘点清单数据
      total:0,      // 总条数
      currentPage:1,    // 当前页
      pagesize:5,       // 每页显示条目个数
    };
  },
  mounted() {},
  created() {
    this.getTime();
    this.getPdState();
    console.log("获取state", this.$store.state);
  },
  //   计算属性
  computed: {
    empno() {
      return this.$store.state.user.userid;
    },
    plantno() {
      return this.$store.state.user.plantno;
    },
  },
  methods: {
    // 获取当前时间所在日期
    async getTime() {
      const res = await workTime();
      this.pdInfo.workDate = res.data.data.date;
      // 在日其查询完毕后,发送盘点清单的请求
      this.getPdList();
    },
    // 获取盘点清单
    async getPdList() {
      console.log("盘点信息", this.pdInfo);
      const res = await pdList(this.pdInfo);
      console.log("获取盘点清单", res);
      if (res.data.state !== 0)
        return this.$message.error("获取数据失败,请重新在试");
      this.pdDataList = res.data.data;
      this.total = this.pdDataList.length;
      return this.$message.success(res.data.desc);
    },
    // 获取盘点状态
    async getPdState() {
      const res = await pdState();
      console.log("获取状态", res);
      this.stateList = res.data.data;
    },
    // 每页条数改变时触发
    handleSizeChange(pageSize){
        console.log('条数',pageSize);
        this.pagesize = pageSize;           // 在 每次 每页条数触发的时候,将选择中的值 赋值给 data 里面定义的 页显示条目个数
    },
    // 当前页改变时触发
    handleCurrentChange(pageNum){
        console.log('当前页改变时触发',pageNum);
        this.currentPage = pageNum;     // 在每次当前页改变后的值 赋值给 data 里面定义的 当前页
    }
  },
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77

总结

提示:这里对文章进行总结:

例如:以上就是Vue利用slice()方法实现分页操作

标签:Vue,分页,res,当前页,盘点,slice,data
From: https://www.cnblogs.com/sunny3158/p/17221645.html

相关文章

  • 前后端分离项目(vue+springboot)集成pageoffice实现在线编辑office文件
    前后端分离项目下使用PageOffice原理图集成步骤前端vue项目在您Vue项目的根目录下index.html中引用后端项目根目录下pageoffice.js文件。例如:<scripttype="te......
  • 宝塔部署history模式的vue3项目
    前置条件:服务器、域名、备案、项目首先进入宝塔点击左侧的网站,然后点击添加站点 填入域名,点击提交,宝塔会自动帮忙创建一个根目录到该根目录,把打包后的vue项目放......
  • VUE的setup、ref、reactive和代理数据的使用
    一.VUE的setup、ref、reactive和代理数据的使用1.1setup和ref先来实现一个简单的点击按钮,数字增加的案例:需求:页面打开后可以直接看到一个数据,点击按钮后,该数据可以发生......
  • Vue 代理服务器___Vue 跨域通过Axios 的ajax方式的get请求获取数据
    Vue代理服务器___Vue跨域通过Axios的ajax方式的get请求获取数据1、说明1.1:配置2台本地服务器说明:node_modules为vue脚手架        package.json为静态数据......
  • Vue封装的过度与动画
    Vue封装的过度与动画1:知识点:##Vue封装的过度与动画1.作用:在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名。2.图示:<imgsrc="https://img04.sogoucdn......
  • MP带条件分页查询
    配置文件@ConfigurationpublicclassMybatisPlusConfig{//分页拦截器,提供逻辑分页,查第几页就是第几页//mybaits是内存分页,将所有数据都查出来再分页@B......
  • Vue.js 计算属性(p18~p20)
    视频18视频19视频20姓名案例_插值语法实现<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>姓名案例_插值语法实现</title> <!--引入Vue-->......
  • Vue.js 事件处理-事件修饰符
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>事件修饰符</title> <!--引入Vue--> <scripttype="text/javascript"src="../js/vue.j......
  • Vue.js 事件处理-事件的基本使用v-on传参
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>事件的基本使用</title> <!--引入Vue--> <scripttype="text/javascript"src="../js/v......
  • vue的路由实现及sass
    day27vue的路由实现及sass路由前端路由根据对应的url地址来渲染不同的内容前端路由的分类页面路由(通过页面的跳转来完成对应的切换(刷新页面))hash路由(通过对应的......