antd ant design vue 树形控件 check 具体详解

Ant design vue pro 树形控件操作

​ 下面是我的树形控件使用的地方

 

在使用过程中发现了一个问题,就是树形控件他如果加了chenkable 他的父子节点关联就会失效,比如向下图,我如果只选中了菜单管理和行政区管理,传参数的话是没有传系统管理父节点的

antd ant design vue 树形控件 check 具体详解_第1张图片

所以需要解决这个问题 ,在选中的同时,组件第二个参数里有半勾选状态的参数集合,只需要把已勾选和半勾选的连接起来,就是全部需要传的参数,这里需要注意一下,不要将v-model绑定的id直接接手连接的数组,因为这样会导致所有的选中框选中,建议先存起来,提交时候做处理

antd ant design vue 树形控件 check 具体详解_第2张图片

提交解决了,然后回显发现了问题,如果又父节点,他会直接把子节点全部选中,不给你一点解释的机会,也是头疼了半天,最后发现一招有效的解决办法,讲回显的父节点全部删除,只留子节点,这样就完美实现了功能

        for(let i in data){
          console.log(data[i]);
          if(listin.includes(data[i])){
            delete data[i]
          }
        }
        modelRef.menuIds = data || []

modelRef.menuIds = data || []


你可能感兴趣的:(Aat,design,vue,js,vue,ant)