elementUI的el-tree的赋值回显问题

el-tree

default-checked-keys

正常回显已经选中的值是 用（default-checked-keys）这个属性

// An highlighted block  
<el-tree
  ref="menuTree"
  :data="allMenu"
  show-checkbox
  node-key="id"
  :default-expand-all="true"
  :default-checked-keys="roleMenu"
  :props="defaultProps"
  @check="changeMenu">
</el-tree>
// 点击保存传值时需要将两个数组合并
const menuIds = this.$refs.menuTree.getCheckedKeys()
const halfMenuIds = this.$refs.menuTree.getHalfCheckedKeys()
const allMenuIds = menuIds.concat(halfMenuIds)

但是由于传值时需要把父节点的值传递过去。getCheckedKeys + getHalfCheckedKeys。

保存时如下图

+

保存后再次编辑时回显会如下图一样 （系统管理会自动勾选中）

回显菜单树时需要对返回的数据处理，把系统管理 菜单 的id去掉

// allMenu就是整个菜单树 []
// roleMenu 就是当前选中的菜单id数组节点 ['111', '2222']
// 循环遍历整个树  
 const newRoleMenu = [] // 处理数据后的菜单数组
 this.allMenu.forEach(item => {
    if (this.roleMenu.includes(item.id)) {
      if (item.hasChildren) { // 是否有子菜单
      	// 默认一级菜单 下的子菜单，都选中时保留该id, 否则去掉
        let isAllChecked = true 
        item.children.forEach(subItem => {
          if (isAllChecked && !this.roleMenu.includes(subItem.id)) {
            isAllChecked = false
          }
          if (this.roleMenu.includes(subItem.id)) {
            newRoleMenu.push(subItem.id)
          }
        })
        if (isAllChecked) {
          newRoleMenu.push(item.id)
        }
      } else {
        newRoleMenu.push(item.id)
      }
    }
  })

有问题可以评论沟通交流，tree的坑还是较多

链接: elemetUI el-drawer头部样式问题，header样式被黑线框住.