• elementui eltable 懒加载情况下数据的更新,以及节点手动展开


    前言

    element-ui中的懒加载文档解释的不算详细,实际处理时有的需求也是查了半天才实现的

    先贴一下我的树的定义,主要,我这里绑定的reflist,绑定的数据是roomList,当然lazytrue

          <el-table
            ref="list"
            :data="roomList"
            row-key="id"
            size="small"
            :lazy="true"
            :load="loadChildrenRoom"
            :row-class-name="getRowClass"
          >
    xxxxxx
          </el-table
    

    问题1:节点数据更新以后,如何更新子节点数据?

    如果只是单纯的更新绑定的数据,我这边尝试是不能更新节点数据的。

    这个在网上能搜到不少,最终我能够使用的方案,是在重新加载时,清空对应ref下的这两个数据:

            this.$set(this.$refs["list"].store.states, "lazyTreeNodeMap", {});
            this.$set(this.$refs["list"].store.states, "treeData", {});
    

    我尝试的结果是无论少清除哪一个,都会有问题

    问题2,编辑子节点保存以后,树就收缩了,那么如果在保存完成后,自动再展开到子节点呢?

    注:我这里处理的情况都是最多一层子节点,所以代码只考虑了一层。

    这个问题我在网上搜了半天,最接近的就是这篇文章地址,不过很遗憾,我按照这个方式,设置hasChildrenchildren并不能起效。

    捣鼓了半天,最后发现,还是需要从上面的lazyTreeNodeMaptreeData入手。
    通过打印,我发现treeData实际包含了各个节点信息,其中有一个关键属性是expanded,就是表示该节点是否展开(当然如果不是双向绑定可能也是白搭,不过测试发现通过设置这个值确实可以触发展开)。
    lazyTreeNodeMap包含了所有待展开叶子节点的数据。

    所以最后的解决方案是,在正常加载完第一层节点数据后:

    1. 获取需要展开的节点的子节点
    2. 将子节点设置到需要展开的节点的children属性上,并将hasChildren属性设置为false(如果不设置false,会有小bug,展开的小箭头状态与实际展开状态不对应)
    3. treeData中设置该节点的expanded属性
      //treeData[id]中的id就是需要展开节点的table定义的rowkey属性值
      this.$set(
        this.$refs["list"].store.states.treeData[id],
        "expanded",
        true
      );
    

  • 相关阅读:
    Spring学习记录(八)---Bean的生命周期
    Spring学习记录(七)---表达式语言-SpEL
    Spring学习记录(六)---使用外部属性文件
    Spring学习记录(五)---bean的作用域scope
    Spring学习记录(四)---bean之间的关系:继承、依赖
    Spring学习记录(三)---bean自动装配autowire
    Spring学习记录(二)---容器和bean属性配置
    2017.9
    Flask
    ELK
  • 原文地址:https://www.cnblogs.com/mosakashaka/p/16059154.html
Copyright © 2020-2023  润新知