naive ui tree 默认选中不生效

如果很急，直接看总结！！

先看文档

naive ui 文档

默认选中

从文档中我们看到有默认选中key的属性，于是尝试如下：

<template><n-tree block-line ref="treeRef"expand-on-click cascadecheckable:data="data":default-checked-keys="['4030', '4032']"/></template><script setup lang="ts">importtype{TreeOption}from'naive-ui'import{repeat}from'seemly'import{nextTick,onMounted,ref}from'vue'functioncreateData(level=4,baseKey=''):TreeOption[]|undefined{if(!level)returnundefined;returnrepeat(6-level,undefined).map((_,index)=>{constkey=`${baseKey}${level}${index}`return{label:createLabel(level),key,children:createData(level-1,key)}})}functioncreateLabel(level:number):string{if(level===4)return'道生一'if(level===3)return'一生二'if(level===2)return'二生三'if(level===1)return'三生万物'return''}constdata=createData();</script>

问题复现，默认选中在异步过程中失效

现在模拟异步获取数据并回显选中情况，代码如下：

<template><n-tree block-line ref="treeRef"expand-on-click cascadecheckable:data="data":default-checked-keys="defaultCheckedKeys"/></template><script setup lang="ts">importtype{TreeOption}from'naive-ui'import{repeat}from'seemly'import{nextTick,onMounted,ref}from'vue'functioncreateData(level=4,baseKey=''):TreeOption[]|undefined{if(!level)returnundefined;returnrepeat(6-level,undefined).map((_,index)=>{constkey=`${baseKey}${level}${index}`return{label:createLabel(level),key,children:createData(level-1,key)}})}functioncreateLabel(level:number):string{if(level===4)return'道生一'if(level===3)return'一生二'if(level===2)return'二生三'if(level===1)return'三生万物'return''}constdata=createData();consttreeRef=ref<string[]>([]);letdefaultCheckedKeys=ref<string[]>([]);onMounted(()=>{setTimeout(()=>{defaultCheckedKeys.value=['4030','4032'];// 很遗憾，naive ui 的 tree 组件并没提供像 setCheckedKeys 这样的函数！！// treeRef.value && treeRef.setCheckedKeys(['4030', '4032']);})})</script>

很遗憾，naive ui 的 tree 组件并没提供像 setCheckedKeys 这样的函数！！

解决方案

既然默认选中的属性怎么尝试都是没用的，这里我们换另一个属性：checked-keys

尝试如下：

<template><n-tree block-line expand-on-click cascade checkable:data="data":checked-keys="defaultCheckedKeys":on-update:checked-keys="updateCheckedKeys"/></template><script setup lang="ts">importtype{TreeOption}from'naive-ui'import{repeat}from'seemly'import{nextTick,onMounted,ref}from'vue'functioncreateData(level=4,baseKey=''):TreeOption[]|undefined{if(!level)returnundefinedreturnrepeat(6-level,undefined).map((_,index)=>{constkey=`${baseKey}${level}${index}`return{label:createLabel(level),key,children:createData(level-1,key)}})}functioncreateLabel(level:number):string{if(level===4)return'道生一'if(level===3)return'一生二'if(level===2)return'二生三'if(level===1)return'三生万物'return''}constdata=createData();letdefaultCheckedKeys=ref<string[]>([]);constupdateCheckedKeys=(a:string[],b:TreeOption[])=>{defaultCheckedKeys.value=a;}onMounted(()=>{console.log(data)setTimeout(()=>{defaultCheckedKeys.value=['4030','4032'];})})</script>

细心的开发者在尝试的时候会注意到，如果只给定 :checked-keys="defaultCheckedKeys" ，会发现，在点击勾选时，选中功能也失效了！ 所以重中之重，还需要配合 on-update:checked-keys 属性，去监听选中的keys并动态赋值！！

总结

至此，naive ui tree 组件异步默认选中的问题就解决了，将正常逻辑下文档指引的default-checked-keys，替换成checked-keys进而绑定选中的keys，结合on-update:checked-keys监听选中状态，对选中的keys进行同步赋值。

<template><n-tree block-line expand-on-click cascade checkable:data="你的数据":checked-keys="defaultCheckedKeys":on-update:checked-keys="updateCheckedKeys"/></template>

letdefaultCheckedKeys=ref<string[]>([]);constupdateCheckedKeys=(a:string[],b:TreeOption[])=>{defaultCheckedKeys.value=a;}