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

最新推荐文章于 2024-07-26 17:41:21 发布

Mangoxin1

最新推荐文章于 2024-07-26 17:41:21 发布

阅读量5.9k

点赞数 1

分类专栏： Aat design vue 文章标签： js vue ant

本文链接：https://blog.csdn.net/m0_56896206/article/details/119355068

版权

Aat design vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Ant design vue pro 树形控件操作

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

 <a-tree
            v-if="treeData && treeData.value && treeData.value.length"
            :checkedKeys="modelRef.menuIds"
            :replace-fields="{ children: 'children', title: 'label', key: 'id', value: 'id' }"   //这里设置节点名字和节点参数
            :defaultCheckedKeys="modelRef.menuIds"
            :defaultExpandedKeys="modelRef.menuIds"
            :tree-data="treeData.value"
            @check="onCheck"  //因为设置了checkable 所以是带选中状态 选中就会触发check
            checkable
          />

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NUNQGYjt-1627982630610)(C:\Users\Mango\AppData\Roaming\Typora\typora-user-images\image-20210803171732638.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g3SkoVFb-1627982630613)(C:\Users\Mango\AppData\Roaming\Typora\typora-user-images\image-20210803171849598.png)]$

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

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