首页 > 其他分享 >在vue中前端自己写分页

在vue中前端自己写分页

时间:2024-01-25 10:13:45浏览次数:24  
标签:index vue 分页 前端 filelist limit 上传 page

在写一个批量上传图片的功能,需要对每一个上传的图片改写文件名并上传。因此需要查看每一张图片的信息。

图片过多,就需要使用分页来展示数据了,下边是部分代码

 <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="limit"
		layout="total, prev, pager, next, jumper" :total="total">
 </el-pagination>

  

 handleCurrentChange(val) {
     this.page = val;
      this.pageList();
 },

  

 pageList(){
       this.uploadList = this.filelist.filter(     //uploadList是table表格绑定的data数组,filelist是需要分页的全部数据,page和limit是分页的页码和当页数据条数,total是数据总量
          (item, index) =>
              index < this.page * this.limit &&
               index >= this.limit * (this.page - 1)
          );
          this.total=this.filelist.length
 },

  通过以上代码就可不用后端,前端自己完成分页了

标签:index,vue,分页,前端,filelist,limit,上传,page
From: https://www.cnblogs.com/bingchenzhilu/p/17986405

相关文章

  • [Vue]Vue3学习笔记1
    官网文档: https://cn.vuejs.org/guide/essentials/template-syntax.html 每个组件都是由createApp创建import{createApp}from'vue'constapp=createApp({/*根组件选项*/}) Vue3.4+支持v-bind同名简写如果属性名称与要绑定的JavaScript值相同,语法可以......
  • Vue2
    Vue2createApp:每个应用都是通过createApp函数创建的create:页面渲染前执行mount:页面渲染后执行v-bind:支持额外的值类型如字符串、对象或数组<buttonv-bind:disabled="isDisabled">Biwin</button><!--简写--><button:disabled="isDisabled">Biwin</bu......
  • 基于vue个人健康管理系统
    前端:vue后端:springboot+mybatis管理员账号:admin管理员密码:123456可以帮忙远程调试或环境搭建(有偿)概述:健康管理系统主要针对需要进行健康管理的用户和机构提供健康管理服务。通过该系统,用户可以进行个性化的健康管理,包括健康监测、健康评估、健康干预等服务。机构可以通过健康......
  • Django学习第一天-Flask_Web前端HTML部分
    目录1.day11.快速开发网站2.浏览器能识别的标签2.1编码2.2title2.3标题2.4div和span2.5超链接2.6图片小结2.7列表2.8表格2.9input系列(7个)2.10下拉框2.11多行文本案例:用户注册2.12网络请求目的:开发一个平台(网站)-前端开发:HTML、CSS、JavaScript-Web框架:接收并处理请求......
  • vue基础指令
    Vue基础指令CDN使用VUE对于制作原型或学习,你可以这样使用最新版本:<scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:<scriptsrc="https://cdn.jsdelivr......
  • vue3中使用animate.css+wow.js
    官网链接:animatewow.js版本声明:"dependencies":{"vue":"^3.3.11","animate.css":"^4.1.1","wow.js":"^1.2.2"},1.安装:npminstallanimate.css--savenpminstallwow.js......
  • js/ts中Date类的ref响应式 -- VUE3
    现象:Date对象无法响应式原因:Date是个深层对象,外面那层可以响应,但是更改里面的层,则不会被侦测到改动解决:强制触发副作用即可参考文档:https://cn.vuejs.org/api/reactivity-advanced.html#triggerref<template><divclass="cnblogs_yucloud">{{DateTime}}</div>......
  • uniapp 触底 请求分页接口
    <scroll-view@scrolltolower="scrollBottom"><product-list:goodspage="goodspage"></product-list></scroll-view>scrollBottom(){console.log('scrollbottom')if(this.page.current<......
  • vue 浏览器通知
    noticeRemind(target){   constnotificationInstanceArr=[]   //constnotificationAudio=newAudio('https://img-fe.tengzhihh.com/audio/c58fb135c2546f.mp3')   consthandleMessageFocus=(target)=>{    //可以在这里根据新消息t......
  • Vue 动态加载本地图片 404 的问题
    今天在vue文件中动态引入本地图片时发现路径没有问题但是一直404template部分如下,使用v-for动态加载,数据存储在setup中的nearbyItems数组内<template><divclass="nearby"><divclass="title">附近店铺</div><divv-for="iteminnear......