Vue使用EleentUI tree table 动态加载以及刷新问题

在使用el-table做树形查询的时候需要动态加载,但是el-table的懒加载机制只会调用一次load方法,解决方式如下:

1. 如果是在点击查询重新加载列表数据之后在点击展开子级没有动态触发load方法的时候可以做如下操作:

如上图当中绑定的key,在每次点击查询加载列表的时候要保证每次都是唯一值,这样子每次点击展开子级列表的时候会触发load方法,查询后台数据

2. 使用$refs方式进行同台触发load方法,如下图所示:

第一步 ，指定ref=table,设置懒加载及指定load函数,在添加expand-change事件绑定对应的方法

第二步，定义缓存行数据的属性字段

第三步, 在load的时候需要把当前行相关的数据缓存起来，方便后面的步骤使用

第四步,在菜单打开和收缩的时候会触发这个函数,如果是第一次打开不需要去加载数据,如果是收缩的话则把子级缓存数据清空还原,如果是第二次及以后展开的话则触发resolve去加载数据

第五步, 在查询列表的时候,不会把已经展开的子级列表收起来,所以需要在查询的时候把展开的菜单收缩起来

操作完以上步骤即可在每次展开的时候都会去触发load函数进行异步加载数据