这两天在项目中用到element-ui的el-tree组件的懒加载，遇到了全部数据刷新的问题。网上能搜索到的解决方案都不太满意，包括保存resolve方法之类的。这破坏了组件的独立性。经过思考，得到了一个更“优雅”的解决方案。
直接上代码。先是template部分：
<el-button size="mini" icon="el-icon-refresh" @click="onRegionHeaderRefresh" />
<el-tree
class="region-tree"
ref="regionTree"
v-loading="isLoadingRegions"
data="regions"
:lazy="true"
:props="props"
:load="loadSubRegions"
node-key="RegionsTree"
@node-click="onNodeClick"
/>
代码部分：
export default {
name: 'companySetting',
data() {
return {
isLoadingRegions: true,
regions: [],
},
},
methods: {
// 异步载入指定父节点的子节点
_loadSubRegions: function (parentRegionId) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const regions =
parentRegionId == null ? [{
id: this.count++,
title: '区域1',
}, ] : [{
id: this.count++,
title: '子区域1',
}, {
id: this.count++,
title: '子区域2',
}, ];
resolve(regions);
}, 500);
});
},
// 响应el-tree的load事件
loadSubRegions: function (node, resolveRegions) {
const prom = this._loadSubRegions(node.data.id);
prom.then(
(value) => {
this.isLoadingRegions = false;
resolveRegions(value);
},
(error) => {
this.isLoadingRegions = false;
this.$message.error(error);
}
);
},
// 手动刷新
onRegionHeaderRefresh: function () {
console.log(this.$refs.regionTree.$children);
this.isLoadingRegions = true;
const prom = this._loadSubRegions();
prom.then((value) => {
this.regions = value;
this.isLoadingRegions = false;
}, (error) => {
this.isLoadingRegions = false;
this.$message.error(error);
});
},
思路其实很简单，就是给el-tree绑定一个data。首次打开的时候，el-tree会自动触发load事件，正常载入。手动刷新的时候，获取根节点信息后放入data中，vue和element会自动完成其余工作。
