element-ui树形控件带复选框时子节点未全选中时父节点半选中,获取不到父节点id

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
在这里插入图片描述

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值