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)
})
})
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。