excel表格数据,antd自动分页,重新导入返回第一页

in 应用教程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

image.png

1.说明:

表格数据:由excel导入前台解析所得,dataSource为99条,
重新导入:重新导入excel,前台重新解析,返回第一页
添加:添加excel,前台解析,push到dataSource的末尾,当前页显示不变

2.bug及需求

前台显示excel1中的数据,翻页至第3页,进行重新导入数据后,仍然返回当前的页码(第3页),正常应该返回第1页。

3.解决方案($nextTick强制重选渲染)

原Dom

<Table  
  columns={this.columns}  
  dataSource={this.dataSource}  
/>

说明:Table不设置pagination属性,默认为null,分页插件根据columns和dataSource数据自动配置显示执行相关操作

原js

data () {  
  return {  
  pagination: null, // 分页相关  
  }  
},
// 解析excel重组获取表格数据,
setTable (data) {
  this.dataSource = this.$getStore('v') // local Storage里面存放excel所有数据,具体请忽略
}
// 重新导入或添加,重新导入要强制重新渲染分页,重新导入后分页置为1,但是添加不用,添加成功后显示最后一次的当前页索引
handleChange (e, add) {
    if (!add) { // 表示重新导入  
      this.$removeStore('v')  
      this.pagination = false  // 设为 false 时不展示和进行分页
    }
    this.$nextTick(() => {  
      this.promiseExcel(e.file).then(result => {
         if (add) { // 如果是添加,从头至尾都不用管pagination
           result = this.$getStore('v') 
         } 
         // 如果是重新导入
         this.$setStore('v', JSON.stringify(result))  
         this.pagination = null  // 设为null根据columns和dataSource数据自动配置
         this.setTable(result) 
       })
     })
}
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看