为了保持住持之以恒的勋章,不得不在9月的最后几天内水几篇原创文章。本人是刚接触element ui,属于大白菜一颗,大神有其他方法的话,欢迎评论留言指导。

 

<el-tree
  :props="props1"
  :load="loadNode1"
  lazy
  show-checkbox>
</el-tree>

<script>
  export default {
    data() {
      return {
        props1: {
          label: 'name',
          children: 'zones',
          isLeaf: 'leaf'
        },
      };
    },
    methods: {
      loadNode1(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region' }]);
        }
        if (node.level > 1) return resolve([]);

        setTimeout(() => {
          const data = [{
            name: 'leaf',
            leaf: true
          }, {
            name: 'zone'
          }];

          resolve(data);
        }, 500);
      }
    }
  };
</script>

上面代码是element ui官方树懒加载的实例。实现就是添加lazy,绑定一个load属性,点击节点的时候,就会触发loadNode1的方法,将数据刷到点击的节点里面。

这里的问题是:如果该节点load过数据,再次点击是不会触发loadNode1这个方法的,但是这个节点下的子节点也许会动态增加或者删除

解决的思路是:

1、得到选中的节点

2、将选中节点的子节点全部删除

3、将选中节点的子节点数据手动刷到该节点内

我查过element ui源码,这里用到源码内的方法,所以我们实现下来很方便,只要三行代码

function refreshLazyTree(node, children) {
  var theChildren = node.childNodes
  theChildren.splice(0, theChildren.length)
  node.doCreateChildren(children)
}

1、node就是选中的的节点(也就是点击展开的节点),你可以通过element ui里的getNode方法获得,也可以直接监听@node-click事件直接获取选中的节点。

2、children就是node这个节点的子项

3、通过splice方法删除node节点下的所有子项

4、调用doCreateChildren创建子项就ok了

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐