ElementUI tree组件无法获取父id和解决父组件选中,打开后子组件全部选中

直接上代码吧
一般情况,我们按照手册上是这么来的。

 this.roleform.role = this.$refs.role_tree.getCheckedKeys();

但是提交后有个问题,全选的时候,父组件会被提交,未全选的时候,只能提交选中的选项,父id不会被提交,果断将上方的代码换成这,就能解决,直接复制粘贴

  var rad='';
  var ridsa = this.$refs.role_tree.getCheckedKeys().join(',');// 获取当前的选中的数据[数组] -id, 把数组转换成字符串
  var ridsb = this.$refs.role_tree.getCheckedNodes();// 获取当前的选中的数据{对象}
  ridsb.forEach(ids=>{       //获取选中的所有的父级id
             rad+=','+ids.parent_id;
        });
  rad=rad.substr(1); // 删除字符串前面的','
  var rids=rad+','+ridsa;
  var arr=rids.split(',');//  把字符串转换成数组
  arr=[...new Set(arr)]; // 数组去重
  for (var i=0; i<arr.length; i++){
      if ( arr[i] == 0){
           arr.splice(i,1);
         }
    }
 this.roleform.role = arr;

ok这是解决完不能提交父级id的问题

下个问题,打开后正确显示的问题。

这个在手册上是有提示的,就是checkStrictly这个参数
在这里插入图片描述

ElementUI tree组件无法获取父id和解决父组件选中,打开后子组件全部选中_第1张图片

:check-strictly="checkStrictly"在获取数据前将checkStrictly赋值成true,数据获取完以后再赋值为false,整个数据就能正常了
ElementUI tree组件无法获取父id和解决父组件选中,打开后子组件全部选中_第2张图片

ok,这样就能解决ElementUI tree组件选择问题

你可能感兴趣的:(vue)