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) 
       })
     })
}

云端的日子
66 声望1 粉丝