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

最新推荐文章于 2024-08-01 15:37:23 发布

原创最新推荐文章于 2024-08-01 15:37:23 发布 · 4.3k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

elmentUI 专栏收录该内容

6 篇文章

订阅专栏

博客主要围绕el-tree组件的default-checked-keys属性展开，介绍正常回显已选中值用该属性，但传值需传递父节点值。还提到保存后再次编辑回显时系统管理会自动勾选，回显菜单树需对返回数据处理，去掉系统管理菜单的id，指出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)
      }
    }
  })