element UI table懒加载 和 tree懒加载 联动

需求

• 点击table表格中的编辑时，表格中的上级部门可以替换位置。而且添加成功后，表格之前的状态不能改变（可以理解为展开项不变）
• 添加子部门时，也可以替换位置，添加成功后，要求同上。

解决问题思路

• 首先表格和弹框中的select下拉框tree都是懒加载。
• 实现表格和tree的联动，思路：存一个表格展开的当前项，将这个数据传给下拉框中的tree，取出全部展开的id 赋值给tree的展开属性。
• 实现tree和table表格的联动，利用tree展开事件，直接调取table中的loadOrToggle方法。
• 编辑
  • 父级部门不改变时，直接将修改的值进行赋值即可。
  • 父级部门改变时，将当前节点进行克隆，删除当前节点，然后找到需要的父节点下的懒加载数据，如果父节点下没有子节点，则将其haschilren属性改为true，然后直接调用loadOrTogg即可，如果有字节点，将其添加进最后一项即可。
• 添加子部门
  • 父节点是当前节点时，判断当前父节点下是否有子节点，如果父节点下没有子节点，则将其haschilren属性改为true，然后直接调用loadOrTogg即可，如果有字节点，将其添加进懒加载数据的最后一项。
  • 父节点不是当前节点时，找到父节点。判断当前父节点下是否有子节点，如果父节点下没有子节点，则将其haschilren属性改为true，然后直接调用loadOrTogg即可，如果有字节点，将其添加进懒加载数据的最后一项。

所用的elment源码方法

• this.$refs.table.store.states.lazyTreeNodeMap[id];
  • 获取table 懒加载数据的方法
  • id 父级id 获取这个id下所有的懒加载节点
• this.$refs.table.store.loadOrToggle(row);
  • 懒加载或者展开关闭节点， row 节点

代码部门

table和tree 联动的核心代码

table组件的代码

 <el-table
            id="table"
            ref="table"
            :key="config.key"