[ant-design-vue] tree 组件功能使用

描述

是希望展现一个树形的菜单，并且对应的菜单前有复选框功能，但是对比官网的例子，我们在使用的过程中涉及到对半选中情况的处理：

半选中状态：
选中子节点中的一个leaf节点后，该节点是被选中的，但是其它节点是未选中的，那么此时父节点 parent1 与parent 1-0 都是半选中状态

全选中状态：
被选中的子节点leaf是全选中状态；
所有子节点都被选中的父节点是全选中状态；

所以关于Api中的selectedKeys和checkedKeys 在设置时有很多疑问，所以在研究后记录一下

环境信息

    "ant-design-vue": "^3.2.13","vue": "^3.2.45",

相关代码

<template><a-tree checkable :showLine="true" :showIcon="true" :tree-data="tree.data" v-model:selectedKeys="check" v-model:checkedKeys="checked" @check="checkNode"></a-tree>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
export default defineComponent({name: "page-tree",setup(){const checkedKeys = reactive({checked: [],//初始化所有选中叶子节点check: [],//当前全选中节点halfCheckedKeys: []//当前半选中节点});const initTreeCheckedKeys = () => {checkedKeys.checked=[1,2,5,6]//排除了所有半选中的节点};const checkNode = (check, event) => {checkedKeys.check = deepClone(check);checkedKeys.halfCheckedKeys = deepClone(event.halfCheckedKeys);};const sumit=()=>{//所有节点：包括全选中与半选中的所有节点const allCheckedId=[...checkedKeys.check,...checkedKeys.halfCheckedKeys]}initTreeCheckedKeys()return {...toRefs(checkedKeys),checkNode}}
})
</script>

参数说明

checkedKeys：根据 checkedKeys 的api说明，传递的只能是所有的叶子节点，不能包含所有的父级节点，否则根据联动规则，对应父级节点的所有子节点都被选中对的。该参数是初始化全选中的节点。

selectedKeys：操作之后的当前全选中节点

checkNode(check, event)参数说明：
check：全选中的所有节点（包括父节点与子节点）
event.halfCheckedKeys:半选中节点（仅仅包含半选中节点）