首先,这个tree节点操作中,选中了父节点,会默认选中全部子节点,某个子节点没选中,那么所有父节点都为半选状态。

半选状态时,使用this.$refs.tree.getCheckedKeys()是获取不到半选状态节点的id的。

现在需求是:选中父节点,子节点全部选中,取消某个子节点,父节点不变。

 关键点是 @check-change事件和this.$refs.tree.setChecked()方法

@check-change:节点选中状态发生变化时的回调,共三个参数,依次为:传递给 data属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
this.$refs.tree.setChecked:通过 key / data 设置某个节点的勾选状态,使用此方法必须设置 node-key 属性,(key/data, checked, deep) 接收三个参数,1. 勾选节点的 key 或者 data 2. boolean 类型,节点是否选中 3. boolean 类型,是否设置子节点 ,默认为 false

 核心代码:

      checkChange(a,b,c){
        console.log(a,b,c);
        b?this.findchildren(a,b):''
      },
      findchildren(current){
          this.$refs.tree.setChecked(current.id,true,true);
          let d=current.children;
          if(d.length>0){
              d.forEach(a =>{
                  this.findchildren(a);
              })
          }
      },

最后效果如图:

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 6 个月前
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 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐