不通过后台接口实现前端分页展示后，对数据操作功能失效

基于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刷新；