chore: Add slot renderNodeKey. (#196)

Author: mutdmour

README.md

@@ -126,6 +126,7 @@ plugins: [
 | selectOnClickNode        | Trigger select when click node                  | boolean                           | true    |
 | highlightSelectedNode    | Support highlighting selected nodes             | boolean                           | true    |
 | collapsedOnClickBrackets | Support click brackets to collapse              | boolean                           | true    |
+| renderNodeKey            | render node key, or use slot #renderNodeKey     | ({ node, defaultKey }) => vNode        | -       |
 | renderNodeValue          | render node value, or use slot #renderNodeValue | ({ node, defaultValue }) => vNode | -       |
 | editable                 | Support editable                                | boolean                           | false   |
 | editableTrigger          | Trigger                                         | `click` \| `dblclick`             | `click` |
@@ -143,6 +144,7 @@ plugins: [
 
 | Slot Name       | Description       | Parameters             |
 | --------------- | ----------------- | ---------------------- |
+| renderNodeKey   | render node key   | { node, defaultKey }        |
 | renderNodeValue | render node value | { node, defaultValue } |
 
 ## Contributors

README.zh_CN.md

@@ -30,6 +30,7 @@
 | selectOnClickNode        | 支持点击节点的时候触发选择                  | boolean                           | true          |
 | highlightSelectedNode    | 支持高亮已选择节点                          | boolean                           | true          |
 | collapsedOnClickBrackets | 支持点击括号折叠                            | boolean                           | true          |
+| renderNodeKey            | 渲染节点键，也可使用 #renderNodeKey    | ({ node, defaultKey }) => vNode | -             |
 | renderNodeValue          | 自定义渲染节点值，也可使用 #renderNodeValue | ({ node, defaultValue }) => vNode | -             |
 | editable                 | 支持可编辑                                  | boolean                           | false         |
 | editableTrigger          | 触发编辑的时机                              | `click` \| `dblclick`             | `click`       |
@@ -47,4 +48,5 @@
 
 | 插槽名          | 描述       | 参数                   |
 | --------------- | ---------- | ---------------------- |
+| renderNodeKey | 渲染节点键 | { node, defaultKey } |
 | renderNodeValue | 渲染节点值 | { node, defaultValue } |

example/Basic.vue

@@ -46,6 +46,10 @@
 
       <h3>Slots:</h3>
       <div class="options">
+        <div>
+          <label>renderNodeKey</label>
+          <input v-model="state.useRenderNodeKeySlot" type="checkbox" />
+        </div>
         <div>
           <label>renderNodeValue</label>
           <input v-model="state.useRenderNodeValueSlot" type="checkbox" />
@@ -66,6 +70,13 @@
         :show-icon="state.showIcon"
         style="position: relative"
       >
+        <template v-if="state.useRenderNodeKeySlot" #renderNodeKey="{ node, defaultKey }">
+          <template v-if="node.key === 'title'">
+            <a>"{{ node.key }}":</a>
+          </template>
+          <template v-else>{{ defaultKey }}:</template>
+        </template>
+
         <template v-if="state.useRenderNodeValueSlot" #renderNodeValue="{ node, defaultValue }">
           <template v-if="typeof node.content === 'string' && node.content.startsWith('http://')">
             <a :href="node.content" target="_blank">{{ node.content }}</a>
@@ -121,6 +132,7 @@ export default defineComponent({
       showLineNumber: false,
       showDoubleQuotes: true,
       collapsedOnClickBrackets: true,
+      useRenderNodeKeySlot: false,
       useRenderNodeValueSlot: false,
       deep: 4,
       setPathCollapsible: false,

src/components/Tree/index.tsx

@@ -67,7 +67,7 @@ export default defineComponent({
     },
   },
 
-  slots: ['renderNodeValue'],
+  slots: ['renderNodeKey', 'renderNodeValue'],
 
   emits: [
     'nodeClick',
@@ -248,6 +248,7 @@ export default defineComponent({
     });
 
     return () => {
+      const renderNodeKey = props.renderNodeKey ?? slots.renderNodeKey;
       const renderNodeValue = props.renderNodeValue ?? slots.renderNodeValue;
 
       const nodeContent =
@@ -270,6 +271,7 @@ export default defineComponent({
             editable={props.editable}
             editableTrigger={props.editableTrigger}
             showIcon={props.showIcon}
+            renderNodeKey={renderNodeKey}
             renderNodeValue={renderNodeValue}
             onNodeClick={handleNodeClick}
             onBracketsClick={handleBracketsClick}

src/components/TreeNode/index.tsx

@@ -21,6 +21,10 @@ export const treeNodePropsPass = {
     type: Boolean,
     default: true,
   },
+  // Custom render for key.
+  renderNodeKey: Function as PropType<
+    (opt: { node: NodeDataType; defaultKey: string | JSX.Element }) => unknown
+  >,
   // Custom render for value.
   renderNodeValue: Function as PropType<
     (opt: { node: NodeDataType; defaultValue: string | JSX.Element }) => unknown
@@ -113,6 +117,14 @@ export default defineComponent({
       props.showDoubleQuotes ? `"${props.node.key}"` : props.node.key,
     );
 
+    const renderKey = () => {
+      const render = props.renderNodeKey;
+
+      return render
+        ? render({ node: props.node, defaultKey: prettyKey.value || '' })
+        : <span class="vjs-key">{`${prettyKey.value}: `}</span>;
+    };
+
     const isMultiple = computed(() => props.selectableType === 'multiple');
 
     const isSingle = computed(() => props.selectableType === 'single');
@@ -223,7 +235,7 @@ export default defineComponent({
             {props.showIcon && <Carets nodeType={node.type} onClick={handleIconClick} />}
           </div>
 
-          {node.key && <span class="vjs-key">{`${prettyKey.value}: `}</span>}
+          {node.key && renderKey()}
 
           <span>
             {node.type !== 'content' && node.content ? (