[{"data":1,"prerenderedAt":626},["ShallowReactive",2],{"navigation_docs":3,"-guide-node-content":102,"-guide-node-content-surround":621},[4,82,87,92,97],{"title":5,"icon":6,"path":7,"stem":8,"children":9},"指南","i-lucide-list-tree","\u002Fguide","1.guide",[10,14,19,24,29,34,39,44,48,53,58,63,68,73,77],{"title":11,"path":7,"stem":12,"icon":13},"指南总览","1.guide\u002Findex","i-lucide-map",{"title":15,"path":16,"stem":17,"icon":18},"快速开始","\u002Fguide\u002Fquick-start","1.guide\u002F1.quick-start","i-lucide-rocket",{"title":20,"path":21,"stem":22,"icon":23},"键盘导航与可访问性","\u002Fguide\u002Fkeyboard","1.guide\u002F10.keyboard","i-lucide-keyboard",{"title":25,"path":26,"stem":27,"icon":28},"类型化 createTypedOkrTree","\u002Fguide\u002Ftyped","1.guide\u002F11.typed","i-lucide-type",{"title":30,"path":31,"stem":32,"icon":33},"Vue Devtools 面板","\u002Fguide\u002Fdevtools","1.guide\u002F12.devtools","i-lucide-wrench",{"title":35,"path":36,"stem":37,"icon":38},"需要注意的行为","\u002Fguide\u002Fbehavior","1.guide\u002F13.behavior","i-lucide-triangle-alert",{"title":40,"path":41,"stem":42,"icon":43},"仓库与本地开发","\u002Fguide\u002Frepo","1.guide\u002F14.repo","i-lucide-folder-git-2",{"title":45,"path":46,"stem":47},"Demo 总览（可交互）","\u002Fguide\u002Fdemos","1.guide\u002F2.demos",{"title":49,"path":50,"stem":51,"icon":52},"自定义节点内容","\u002Fguide\u002Fnode-content","1.guide\u002F3.node-content","i-lucide-layout-template",{"title":54,"path":55,"stem":56,"icon":57},"受控状态与方法","\u002Fguide\u002Fcontrolled","1.guide\u002F4.controlled","i-lucide-sliders-horizontal",{"title":59,"path":60,"stem":61,"icon":62},"复选框与拖拽","\u002Fguide\u002Finteraction","1.guide\u002F5.interaction","i-lucide-mouse-pointer-click",{"title":64,"path":65,"stem":66,"icon":67},"懒加载子节点","\u002Fguide\u002Flazy","1.guide\u002F6.lazy","i-lucide-layers",{"title":69,"path":70,"stem":71,"icon":72},"虚拟滚动 virtual","\u002Fguide\u002Fvirtual","1.guide\u002F7.virtual","i-lucide-scan",{"title":74,"path":75,"stem":76,"icon":72},"画布缩放 OkrTreeViewport","\u002Fguide\u002Fviewport","1.guide\u002F8.viewport",{"title":78,"path":79,"stem":80,"icon":81},"多树根对齐 OkrTreeGroup","\u002Fguide\u002Fgroup","1.guide\u002F9.group","i-lucide-network",{"title":83,"path":84,"stem":85,"icon":86},"主题与样式定制","\u002Ftheme","2.theme","i-lucide-palette",{"title":88,"path":89,"stem":90,"icon":91},"API","\u002Fapi","3.api","i-lucide-braces",{"title":93,"path":94,"stem":95,"icon":96},"与 vue-okr-tree 的差异（迁移说明）","\u002Fmigration","4.migration","i-lucide-arrow-right-left",{"title":98,"path":99,"stem":100,"icon":101},"更新日志","\u002Fchangelog","5.changelog","i-lucide-history",{"id":103,"title":49,"body":104,"description":614,"extension":615,"links":616,"meta":617,"navigation":618,"path":50,"seo":619,"stem":51,"__hash__":620},"docs\u002F1.guide\u002F3.node-content.md",{"type":105,"value":106,"toc":607},"minimark",[107,128,134,137,189,396,402,404,411,458,462,465,520,523,588,591,603],[108,109,110,111,115,116,119,120,123,124,127],"p",{},"三种等价写法，优先级：",[112,113,114],"code",{},"#default"," 插槽 > ",[112,117,118],{},"node-component"," > ",[112,121,122],{},"render-content","。三者都缺省时渲染节点的 ",[112,125,126],{},"label","。",[129,130,131],"docs-demo",{},[132,133],"demo-node-content",{},[135,136,122],"h2",{"id":122},[108,138,139,140,143,144,147,148,151,152,156,157,160,161,164,165,168,169,168,172,168,175,168,178,168,181,184,185,188],{},"签名 ",[112,141,142],{},"(h, node)","：",[112,145,146],{},"h"," 是 Vue 的渲染函数（由组件从 vue 导入后传入），",[112,149,150],{},"node"," 是",[153,154,155],"strong",{},"内部 Node 实例","（源数据在 ",[112,158,159],{},"node.data","，文本在 ",[112,162,163],{},"node.label","，另有 ",[112,166,167],{},"isCurrent"," \u002F ",[112,170,171],{},"expanded",[112,173,174],{},"leftExpanded",[112,176,177],{},"isLeftChild",[112,179,180],{},"level",[112,182,183],{},"childNodes"," 等）。这与 element-ui 的 ",[112,186,187],{},"(h, { data })"," 不同，与 vue-okr-tree 保持一致。",[190,191,197],"pre",{"className":192,"code":193,"filename":194,"language":195,"meta":196,"style":196},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function renderContent(h, node) {\n  return h('div', { class: ['diy', node.isCurrent && 'is-current', node.isLeftChild && 'left'] }, [\n    h('div', node.data.label),\n    h('small', node.data.content),\n  ])\n}\n","renderContent.ts","ts","",[112,198,199,231,321,353,384,390],{"__ignoreMap":196},[200,201,204,208,212,216,219,222,225,228],"span",{"class":202,"line":203},"line",1,[200,205,207],{"class":206},"spNyl","function",[200,209,211],{"class":210},"s2Zo4"," renderContent",[200,213,215],{"class":214},"sMK4o","(",[200,217,146],{"class":218},"sHdIc",[200,220,221],{"class":214},",",[200,223,224],{"class":218}," node",[200,226,227],{"class":214},")",[200,229,230],{"class":214}," {\n",[200,232,234,238,241,244,247,251,253,255,258,261,264,267,269,272,274,276,279,282,284,287,290,293,295,297,299,301,303,305,307,310,312,315,318],{"class":202,"line":233},2,[200,235,237],{"class":236},"s7zQu","  return",[200,239,240],{"class":210}," h",[200,242,215],{"class":243},"swJcz",[200,245,246],{"class":214},"'",[200,248,250],{"class":249},"sfazB","div",[200,252,246],{"class":214},[200,254,221],{"class":214},[200,256,257],{"class":214}," {",[200,259,260],{"class":243}," class",[200,262,263],{"class":214},":",[200,265,266],{"class":243}," [",[200,268,246],{"class":214},[200,270,271],{"class":249},"diy",[200,273,246],{"class":214},[200,275,221],{"class":214},[200,277,224],{"class":278},"sTEyZ",[200,280,281],{"class":214},".",[200,283,167],{"class":278},[200,285,286],{"class":214}," &&",[200,288,289],{"class":214}," '",[200,291,292],{"class":249},"is-current",[200,294,246],{"class":214},[200,296,221],{"class":214},[200,298,224],{"class":278},[200,300,281],{"class":214},[200,302,177],{"class":278},[200,304,286],{"class":214},[200,306,289],{"class":214},[200,308,309],{"class":249},"left",[200,311,246],{"class":214},[200,313,314],{"class":243},"] ",[200,316,317],{"class":214},"},",[200,319,320],{"class":243}," [\n",[200,322,324,327,329,331,333,335,337,339,341,344,346,348,350],{"class":202,"line":323},3,[200,325,326],{"class":210},"    h",[200,328,215],{"class":243},[200,330,246],{"class":214},[200,332,250],{"class":249},[200,334,246],{"class":214},[200,336,221],{"class":214},[200,338,224],{"class":278},[200,340,281],{"class":214},[200,342,343],{"class":278},"data",[200,345,281],{"class":214},[200,347,126],{"class":278},[200,349,227],{"class":243},[200,351,352],{"class":214},",\n",[200,354,356,358,360,362,365,367,369,371,373,375,377,380,382],{"class":202,"line":355},4,[200,357,326],{"class":210},[200,359,215],{"class":243},[200,361,246],{"class":214},[200,363,364],{"class":249},"small",[200,366,246],{"class":214},[200,368,221],{"class":214},[200,370,224],{"class":278},[200,372,281],{"class":214},[200,374,343],{"class":278},[200,376,281],{"class":214},[200,378,379],{"class":278},"content",[200,381,227],{"class":243},[200,383,352],{"class":214},[200,385,387],{"class":202,"line":386},5,[200,388,389],{"class":243},"  ])\n",[200,391,393],{"class":202,"line":392},6,[200,394,395],{"class":214},"}\n",[108,397,398,401],{},[112,399,400],{},"node-btn-content"," 用同一套参数约定，定制展开按钮内容。",[135,403,118],{"id":118},[108,405,406,407,410],{},"传一个组件，以 ",[112,408,409],{},"{ node, data }"," 为 props 渲染（Vue 3 版新增）：",[190,412,417],{"className":413,"code":414,"filename":415,"language":416,"meta":196,"style":196},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cvue-okr-tree :data=\"data\" :node-component=\"DeptCard\" \u002F>\n","App.vue","vue",[112,418,419],{"__ignoreMap":196},[200,420,421,424,427,430,432,435,438,440,442,444,446,448,450,453,455],{"class":202,"line":203},[200,422,423],{"class":214},"\u003C",[200,425,426],{"class":243},"vue-okr-tree",[200,428,429],{"class":214}," :",[200,431,343],{"class":206},[200,433,434],{"class":214},"=",[200,436,437],{"class":214},"\"",[200,439,343],{"class":278},[200,441,437],{"class":214},[200,443,429],{"class":214},[200,445,118],{"class":206},[200,447,434],{"class":214},[200,449,437],{"class":214},[200,451,452],{"class":278},"DeptCard",[200,454,437],{"class":214},[200,456,457],{"class":214}," \u002F>\n",[135,459,461],{"id":460},"default-插槽","#default 插槽",[108,463,464],{},"作用域插槽（Vue 3 版新增，原版的插槽实际不可用）：",[190,466,468],{"className":413,"code":467,"filename":415,"language":416,"meta":196,"style":196},"\u003Cvue-okr-tree :data=\"data\">\n  \u003Ctemplate #default=\"{ node, data }\">\n    \u003Cb>{{ data.label }}\u003C\u002Fb>\n    \u003Csmall v-if=\"node.isCurrent\">（已选中）\u003C\u002Fsmall>\n  \u003C\u002Ftemplate>\n\u003C\u002Fvue-okr-tree>\n",[112,469,470,491,496,501,506,511],{"__ignoreMap":196},[200,471,472,474,476,478,480,482,484,486,488],{"class":202,"line":203},[200,473,423],{"class":214},[200,475,426],{"class":243},[200,477,429],{"class":214},[200,479,343],{"class":206},[200,481,434],{"class":214},[200,483,437],{"class":214},[200,485,343],{"class":278},[200,487,437],{"class":214},[200,489,490],{"class":214},">\n",[200,492,493],{"class":202,"line":233},[200,494,495],{"class":278},"  \u003Ctemplate #default=\"{ node, data }\">\n",[200,497,498],{"class":202,"line":323},[200,499,500],{"class":278},"    \u003Cb>{{ data.label }}\u003C\u002Fb>\n",[200,502,503],{"class":202,"line":355},[200,504,505],{"class":278},"    \u003Csmall v-if=\"node.isCurrent\">（已选中）\u003C\u002Fsmall>\n",[200,507,508],{"class":202,"line":386},[200,509,510],{"class":278},"  \u003C\u002Ftemplate>\n",[200,512,513,516,518],{"class":202,"line":392},[200,514,515],{"class":214},"\u003C\u002F",[200,517,426],{"class":243},[200,519,490],{"class":214},[135,521,522],{"id":522},"其余插槽",[524,525,526,542],"table",{},[527,528,529],"thead",{},[530,531,532,536,539],"tr",{},[533,534,535],"th",{},"插槽名",[533,537,538],{},"说明",[533,540,541],{},"作用域参数",[543,544,545,573],"tbody",{},[530,546,547,553,560],{},[548,549,550],"td",{},[112,551,552],{},"expand-btn",[548,554,555,556,559],{},"展开按钮内容；",[112,557,558],{},"show-node-num"," 开启时折叠态的数字优先于该插槽",[548,561,562,565,566,569,570,572],{},[112,563,564],{},"{ node, data, expanded, side, loading }","，side 为 ",[112,567,568],{},"right","（常规\u002F右子树）或 ",[112,571,309],{},"（OKR 左子树），loading 为懒加载进行中",[530,574,575,580,585],{},[548,576,577],{},[112,578,579],{},"empty",[548,581,582,584],{},[112,583,343],{}," 为空数组时在容器内渲染",[548,586,587],{},"—",[135,589,590],{"id":590},"类型收窄",[108,592,593,594,596,597,127],{},"需要插槽作用域里的 ",[112,595,343],{}," 带上自己的数据类型，用 ",[598,599,600],"a",{"href":26},[112,601,602],{},"createTypedOkrTree\u003CT>()",[604,605,606],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":196,"searchDepth":233,"depth":233,"links":608},[609,610,611,612,613],{"id":122,"depth":233,"text":122},{"id":118,"depth":233,"text":118},{"id":460,"depth":233,"text":461},{"id":522,"depth":233,"text":522},{"id":590,"depth":233,"text":590},"「#default 插槽 \u002F node-component \u002F render-content」三种自定义节点内容的写法与优先级","md",null,{},{"icon":52},{"title":49,"description":614},"DZCdaB6SPE5LxWsc7sTZgyCLSL2X2G5izlUb4uX03Rk",[622,624],{"title":45,"path":46,"stem":47,"description":623,"children":-1},"与 Playground 同一批组件源码的可交互用例集",{"title":54,"path":55,"stem":56,"description":625,"icon":57,"children":-1},"受控\u002F非受控的判定规则、通过 ref 调用的方法与事件回调签名",1790437331469]