El-tree 懒加载刷新数据的新方法

这两天在项目中用到element-ui的el-tree组件的懒加载，遇到了全部数据刷新的问题。网上能搜索到的解决方案都不太满意，包括保存resolve方法之类的。这破坏了组件的独立性。经过思考，得到了一个更“优雅”的解决方案。

直接上代码。先是template部分：

代码部分：

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会自动完成其余工作。