iview tree树形菜单实践之数据回显与选中

iview tree树形菜单在使用过程中，多多少少有一些小坑，本文简单罗列几个：

避坑指南： 关于iview tree树形菜单在使用过程中存在父级菜单的数据传输和回显问题

简单就是两个方面：勾选后数据传输和回显问题。

一，数据传输问题：

上篇文章简单介绍了 iview tree渲染数据及获取选中数据，使用方法：

@on-check-change="checkMenu"

但是存在一个问题：

通过此方法，勾选一般子级菜单时，它不会传该父级菜单的id。需要全选子级菜单时才会带上父级的id。这是一个比较棘手的问题。那么，我们可以通过方法 $ref操作tree的dom获取数据：

 <Tree :data="menuTree" show-checkbox  ref="menuTree" 
 @on-check-change="checkMenu" @on-select-change="selectMenu"></Tree>

从而进行同时选中一半子级菜单的id及所选的父级菜单id

this.$refs.menuTree.getCheckedAndIndeterminateNodes()

二，数据回显问题：

当解决掉第一种存在的问题后，那么，在数据显示时，也会存在问题。
比如，当操作勾选到一个父菜单下的一部分子菜单数据时，显示时，可以通过已经配置过的数据来比对所有选项判断显示父级子级的菜单是否勾选，勾选状态通过子段（checked）遍历赋值，进行渲染勾选状态回显：

item['checked'] = true;

但是不能只通过这个方法的（true,false）来判断，因为不能仅仅通过父级的id显示是否勾选状态。父级状态为勾选时有两种情况：

1.只有父级菜单时；
2.父级菜单下的子级菜单全部选中时，他会自动勾选

所以存在上面这种情况，当回显数据为一个父级id和一部分该父级下的子级组合时，会出现bug：

因为勾选时，我们传了父级id,所以回显显示时，这个傻瓜式组件，它根据父级id回显了所有，然而实际情况只需显示一部分即可。这个就是tree的坑。

解决方法是：

判断只有父级的id且该父级下不存在子级时让它回显

方法：

this.selMenuIds.includes(item.id)&&item.children == null

而子级让它自然显示即可。子级全部选中时，父级会自动显示的，这块不用担心。

具体代码：

 if (data != null && data != undefined) {
                data.forEach((item, index) => {
                  if (this.selMenuIds.includes(item.id)&&item.children == null) {
                    item['checked'] = true;//仅父节点选中时回显
                  }
                  if (item.children != null && item.children != undefined) {
                    item.children.forEach((it, index) => {
                      if (this.selMenuIds.includes(it.id)) {
                        it['checked'] = true
                      }
                    })
                  }
                })
                this.menuTree = data
  }

往期更多精彩：

1.vue+iView 实现可输入的下拉框
2.vue+iView 权限实践之动态显示侧边栏菜单
3.iView复合型输入框动态生成表达式

喜欢就多多点赞关注。