element的table懒加载强制清空内容

3,070 阅读1分钟

前言

element的懒加载提供了缓存机制,即你点击加载过的内容,下一次点击不会再去调用接口,就算你的父内容变化了,只要父的id没变,子的内容依旧不会去加载新的内容。这就导致了项目中经常出现的一个问题: 懒加载的表格,初始加载2020的数据,但是在筛选时间为2019后,只有父的内容以及未加载过的子点击加载内容更新为2019,已加载过的子内容依旧是2020的内容。 如下图:

解决方法

在遇到上述的问题之后,我看了下element的官方文档,发现并没有相应的解决方法,在折腾了半天后,终于发现,这是官方尚未解决的bug……找到了关于cascade下拉的解决方法:

this.$refs.ticketTypes.$children[1].$children[1].activePath = []

传送门:github.com/ElemeFE/ele…

但是实践得知,table的数据是存储在store中,查看源码,终于找到了强制清空table懒加载内容的方法:

this.$refs.tableRef.store.states.treeData = {}

在筛选时间之后,获取数据之前,执行清空store操作,就能强制清空table内容,这样在重新加载父内容后,子的内容也是重新加载的