vue中tree的使用一（添加复选框）_a-tree中check方法两个参数分别代表啥’-优快云博客

本文链接：https://blog.youkuaiyun.com/reembarkation/article/details/125514118

本文介绍了如何使用Ant Design的a-tree组件，通过设置checkable和checkStrictly属性来实现资源树的选择功能。当checkStrictly为true时，选择节点不会包含父节点，可以单独控制节点选中状态。同时，利用v-model绑定选中值，并通过onCheck事件处理选中变化。默认选中和获取选中结果也变得简单，只需操作selectKeys对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中常常有各种资源树的使用，现在简单介绍一下使用复选框，选择资源树中的资源的方法。这里使用的是ant-desigin 中的a-tree:

1.在html中定义树：

     <a-tree
        checkable
        style="overflow: hidden"
        v-if="systemnav && systemnav.length > 0"
        :show-line="true"
        :tree-data="systemnav"
        :default-expanded-keys="defaultopen"
        v-model="selectKeys"
        :checkStrictly="true"
      />

其中：systemnav是该tree的数据源，大体结构是这样：

[
    { title:'所有分类', key:'0', children:[
        {title:'分类1', key:'1',children:[...]},
        ...
        ],
    ...
    }
]

checkStrictly设置为true，则选择节点不再默认包含父节点。如果设置为false,则选中某节点是时候父节点默认也是在选中项中：

例如：checkStrictly设置为false:

tree中加入 @check="onCheck"，可以从方法onCheck(checkedKeys, e){...}中看出差别。参数checkedKeys直接就是你选择的节点以及子节点；e中则包含halfchecked属性，该属性值就是父节点的集合。

checkStrictly设置为true:

相应的参数checkedKeys包含两个属性：checked和halfchecked，checked就是你选中的节点的key值的集合，不包含对应的子节点key值；而halfchecked则是空集合。

所以我这里应用的时候不想要子节点key也不需要父节点key,就设置了checkStrictly设置为true。并且使用了v-model绑定了选中值。

如果要初始后绑定某些默认选项，可以直接使用this.selectKeys={checked:defaultKeys};选取后要获取最终个选取结果，也可以直接使用：let data=this.selectKeys.checked。这样代码很少，但是已经实现了项目中的需求。