zoukankan      html  css  js  c++  java
  • 不通过后台接口实现前端分页展示后,对数据操作功能失效

    基于element组件开发,页面上表格分页一般是根据后台数据分页,即每次分页都要请求接口,现在的需求是,前端分页,不请求接口,可用以下方法实现:

    html中:

    el-table中,data这样写:

    :data="bomDataList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
    分页:
          <el-pagination  background  layout="prev, pager, next"  :total="total"   @current-change="current_change"   </el-pagination>
    js中:
    定义变量:
            total:0,//默认数据总数
            pagesize:10,//每页的数据条数
            currentPage:1,//默认开始页面
    分页方法:
         current_change:function(currentPage){
                this.currentPage = currentPage;
          },
    这样就可以实现页面分页功能,如果只是想实现分页展示数据,这样写没问题。但是如果要对分页数据进行操作,比如多选、删除等等,这样写就会有问题,所有操作引用的数据变量(即上文中bomDataList都没有真的分页),会导致全选后点击弹窗后,全选消失,或者点第二页操作失效等问题,解决方式如下:
    用computed计算属性解决
    //将计算的分页数据缓存起来
      computed: {
        databox() {
          return this.arrAuditData.slice(
            (this.currentPage - 1) * this.pagesize,
            this.currentPage * this.pagesize
          );
        }
      },
    此时el-table中data写成:
    :data="databox"
    执行每行数据操作时(所有对每条数据操作时都要注意)
    getDetailData(val){
    获取下标的计算方式,否则取得只是分页后的下标
    this.rowIndex = parseInt(val.index) + (this.currentPage - 1) * this.pagesize;
    }
    这样就可以解决分页后操作数据失效问题了。
    但是需要注意一个问题,
    方法中用=号赋值时不会更新computed里的属性,导致页面不能实时刷新,所以用$set刷新;
     
    不断学习.jpg
  • 相关阅读:
    Java实现LeetCode_0041_FirstMissingPositive
    Java实现 Leetcode 169 求众数
    Java实现 LeetCode 137 只出现一次的数字
    Java实现 LeetCode 137 只出现一次的数字
    Java实现 Leetcode 169 求众数
    TimeUnit用法
    第六章:任务执行——Java并发编程实战
    Java实现的并发任务处理实例
    java三大框架实现任务调度——IRemindService
    如何在一个div中使其子div居中
  • 原文地址:https://www.cnblogs.com/shanxinxin/p/12725822.html
Copyright © 2011-2022 走看看