elementui树形控件子节点未全选中时父节点半选中,获取不到父节点id

今天调试权限功能时发现,线路管理下面三个子节点选中两个,然后保存提交后突然发现菜单栏里的【线路管理】不见了!
在这里插入图片描述
在这里插入图片描述

解决办法

最后检查发现是提交时,半选中的节点不算选中,不包含在roleDialogFormData.menus中导致了这个问题

              <el-tree
                ref="menusTree"
                :data="menusData"
                show-checkbox
                node-key="id"
                :props="defaultProps"
                :default-checked-keys="roleDialogFormData.menus"
                style="padding-top:10px;">
              </el-tree>

查阅文档发现自带getHalfCheckedKeys方法可实现。将getCheckedKeys与getHalfCheckedKeys获得的数组合并后提交则可获得包含了子节点未全选中的父节点数据。
在这里插入图片描述

      let checkedKeys = this.$refs.menusTree.getCheckedKeys();
      let hafCheckedKeys = this.$refs.menusTree.getHalfCheckedKeys();
      let formData = {
        id: this.roleDialogFormData.id,
        roleName: this.roleDialogFormData.roleName,
        remark: this.roleDialogFormData.remark,
        menus: checkedKeys.concat(hafCheckedKeys),
        devices: this.roleDialogFormData.selectDevice
      }
      this.$http.post('/api/role/addRole', formData).then((res) => {
        if (res.data.code === 200) {
          this.roleDialogVisible = false;
          this.loadRoleData();
          this.$message({message: '添加角色成功', type: 'success'});
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(function (error) {
        console.log(error)
      })
    },

注意事项,赋值时会显示全选中

但是要注意的是,再次获取选中数据时,因为数据中包含了父节点显示选中会出现问题。
以上面的代码为例,roleDialogFormData.menus中包含了父节点线路管理,子节点新增线路也会显示选中,但实际上没有选中,所以在赋值时,要把子节点未全选中的父节点的id从数据中剔除掉,不能赋值给roleDialogFormData.menus
在这里插入图片描述

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐