naive ui tree 默认选中不生效

如果很急直接看总结先看文档naive ui 文档默认选中从文档中我们看到有默认选中key的属性于是尝试如下templaten-tree block-line reftreeRefexpand-on-click cascadecheckable:datadata:default-checked-keys[4030, 4032]//templatescript setup langtsimporttype{TreeOption}fromnaive-uiimport{repeat}fromseemlyimport{nextTick,onMounted,ref}fromvuefunctioncreateData(level4,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(level4)return道生一if(level3)return一生二if(level2)return二生三if(level1)return三生万物return}constdatacreateData();/script问题复现默认选中在异步过程中失效现在模拟异步获取数据并回显选中情况代码如下templaten-tree block-line reftreeRefexpand-on-click cascadecheckable:datadata:default-checked-keysdefaultCheckedKeys//templatescript setup langtsimporttype{TreeOption}fromnaive-uiimport{repeat}fromseemlyimport{nextTick,onMounted,ref}fromvuefunctioncreateData(level4,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(level4)return道生一if(level3)return一生二if(level2)return二生三if(level1)return三生万物return}constdatacreateData();consttreeRefrefstring[]([]);letdefaultCheckedKeysrefstring[]([]);onMounted((){setTimeout((){defaultCheckedKeys.value[4030,4032];// 很遗憾naive ui 的 tree 组件并没提供像 setCheckedKeys 这样的函数// treeRef.value treeRef.setCheckedKeys([4030, 4032]);})})/script很遗憾naive ui 的 tree 组件并没提供像 setCheckedKeys 这样的函数解决方案既然默认选中的属性怎么尝试都是没用的这里我们换另一个属性checked-keys尝试如下templaten-tree block-line expand-on-click cascade checkable:datadata:checked-keysdefaultCheckedKeys:on-update:checked-keysupdateCheckedKeys//templatescript setup langtsimporttype{TreeOption}fromnaive-uiimport{repeat}fromseemlyimport{nextTick,onMounted,ref}fromvuefunctioncreateData(level4,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(level4)return道生一if(level3)return一生二if(level2)return二生三if(level1)return三生万物return}constdatacreateData();letdefaultCheckedKeysrefstring[]([]);constupdateCheckedKeys(a:string[],b:TreeOption[]){defaultCheckedKeys.valuea;}onMounted((){console.log(data)setTimeout((){defaultCheckedKeys.value[4030,4032];})})/script细心的开发者在尝试的时候会注意到如果只给定 :checked-keysdefaultCheckedKeys 会发现在点击勾选时选中功能也失效了 所以重中之重还需要配合 on-update:checked-keys 属性去监听选中的keys并动态赋值总结至此naive ui tree 组件异步默认选中的问题就解决了将正常逻辑下文档指引的default-checked-keys替换成checked-keys进而绑定选中的keys结合on-update:checked-keys监听选中状态对选中的keys进行同步赋值。templaten-tree block-line expand-on-click cascade checkable:data你的数据:checked-keysdefaultCheckedKeys:on-update:checked-keysupdateCheckedKeys//templateletdefaultCheckedKeysrefstring[]([]);constupdateCheckedKeys(a:string[],b:TreeOption[]){defaultCheckedKeys.valuea;}