fix(tree-select): keys should support deep keys

src/select-input/useMultiple.tsx

@@ -2,7 +2,7 @@ import {
   SetupContext, computed, ref, toRefs,
 } from '@vue/composition-api';
 import isObject from 'lodash/isObject';
-import Vue from 'vue';
+import lodashGet from 'lodash/get';
 import { TdSelectInputProps, SelectInputKeys } from './type';
 import { SelectInputCommonProperties } from './interface';
 import TagInput, { TagInputValue, TagInputProps } from '../tag-input';
@@ -37,9 +37,9 @@ export default function useMultiple(props: TdSelectInputProps, context: SetupCon
   const iKeys = computed<SelectInputKeys>(() => ({ ...DEFAULT_KEYS, ...props.keys }));
   const tags = computed<TagInputValue>(() => {
     if (!(props.value instanceof Array)) {
-      return isObject(props.value) ? [props.value[iKeys.value.label]] : [props.value];
+      return isObject(props.value) ? [lodashGet(props.value, iKeys.value.label)] : [props.value];
     }
-    return props.value.map((item) => (isObject(item) ? item[iKeys.value.label] : item));
+    return props.value.map((item) => (isObject(item) ? lodashGet(item, iKeys.value.label) : item));
   });
 
   const tPlaceholder = computed<string>(() => (!tags.value || !tags.value.length ? props.placeholder : ''));

src/select-input/useSingle.tsx

@@ -4,6 +4,7 @@ import {
 
 import isObject from 'lodash/isObject';
 import pick from 'lodash/pick';
+import lodashGet from 'lodash/get';
 import { SelectInputCommonProperties } from './interface';
 import { TdSelectInputProps } from './type';
 import Input, { InputProps, StrInputProps } from '../input';
@@ -32,7 +33,7 @@ const DEFAULT_KEYS = {
 
 function getInputValue(value: TdSelectInputProps['value'], keys: TdSelectInputProps['keys']) {
   const iKeys = keys || DEFAULT_KEYS;
-  return isObject(value) ? value[iKeys.label] : value;
+  return isObject(value) ? lodashGet(value, iKeys.label) : value;
 }
 
 export default function useSingle(props: TdSelectInputProps, context: SetupContext) {

src/tree-select/tree-select.tsx

@@ -1,6 +1,7 @@
 import { defineComponent, computed } from '@vue/composition-api';
 import isArray from 'lodash/isArray';
 import isFunction from 'lodash/isFunction';
+import lodashGet from 'lodash/get';
 import Tree from '../tree';
 import props from './props';
 import SelectInput from '../select-input';
@@ -180,7 +181,7 @@ export default defineComponent({
                 ? {
                   value: this.nodeInfo as TreeOptionData<string | number>[],
                   onClose: (index: number) => {
-                    const value = this.nodeInfo.map((node: TreeOptionData) => node.value);
+                    const value = this.nodeInfo.map((node: TreeOptionData) => lodashGet(node, this.tKeys.value));
                     this.tagChange(value, {
                       trigger: 'tag-remove',
                       index,

src/tree-select/useTreeSelect.ts

@@ -2,6 +2,7 @@ import {
   SetupContext, ref, computed, toRefs, watch,
 } from '@vue/composition-api';
 import isFunction from 'lodash/isFunction';
+import { get as lodashGet, set as lodashSet } from 'lodash';
 import { RemoveOptions, TdTreeSelectProps, TreeSelectValue } from './type';
 import { TreeProps, TreeInstanceFunctions, TreeNodeValue } from '../tree';
 import { usePrefixClass, useConfig } from '../hooks/useConfig';
@@ -57,7 +58,7 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
   const tKeys = computed<TreeKeysType>(() => ({ ...DEFAULT_KEYS, ...props.treeProps?.keys, ...props.keys }));
 
   const inputPlaceholder = computed(() => {
-    let label = nodeInfo.value?.[tKeys.value.label];
+    let label = nodeInfo.value ? lodashGet(nodeInfo.value, tKeys.value.label) : undefined;
     if (typeof label === 'number') label = String(label);
     return (innerVisible.value && label) || props.placeholder || global.value.placeholder;
   });
@@ -89,17 +90,17 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
   // single tree-select use nodeInfo to compute singleActivated
   const singleActivated = computed(() => {
     if (props.multiple || !nodeInfo.value) return [];
-    if (nodeInfo.value instanceof Array) return [nodeInfo.value[0]?.[tKeys.value.value]];
-    return [nodeInfo.value[tKeys.value.value]];
+    if (nodeInfo.value instanceof Array) return [nodeInfo.value[0] ? lodashGet(nodeInfo.value[0], tKeys.value.value) : undefined];
+    return [lodashGet(nodeInfo.value, tKeys.value.value)];
   });
 
   // multiple tree-select: use nodeInfo to compute multipleChecked, because nodeInfo also decided by treeSelectValue
   const multipleChecked = computed((): Array<TreeNodeValue> => {
     if (!props.multiple || !nodeInfo.value) return [];
     if (nodeInfo.value instanceof Array) {
-      return nodeInfo.value.map((item: TreeOptionData) => item[tKeys.value.value]);
+      return nodeInfo.value.map((item: TreeOptionData) => lodashGet(item, tKeys.value.value));
     }
-    return [nodeInfo.value[tKeys.value.value]];
+    return [lodashGet(nodeInfo.value, tKeys.value.value)];
   });
 
   // multiple tree select node info list
@@ -109,15 +110,13 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
     if (treeRef.value) {
       return list.map((item) => {
         const finalValue = typeof item === 'object' ? item.value : item;
-        return (
-          treeRef.value.getItem(finalValue)?.data || {
-            [tKeys.value.label]: finalValue,
-            [tKeys.value.value]: finalValue,
-          }
-        );
+        const obj = {};
+        lodashSet(obj, tKeys.value.label, finalValue);
+        lodashSet(obj, tKeys.value.value, finalValue);
+        return treeRef.value.getItem(finalValue)?.data || obj;
       });
     }
-    const onlyValues = list.map((item) => (typeof item === 'object' ? item[tKeys.value.value] : item));
+    const onlyValues = list.map((item) => (typeof item === 'object' ? lodashGet(item, tKeys.value.value) : item));
     return getNodeDataByValue(onlyValues, props.data, tKeys.value);
   }
 
@@ -130,12 +129,10 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
     const oneValue = Array.isArray(value) ? value[0] : value;
     const finalValue = typeof oneValue === 'object' ? oneValue.value : oneValue;
     if (treeRef.value) {
-      return (
-        treeRef.value.getItem(finalValue)?.data || {
-          [tKeys.value.label]: finalValue,
-          [tKeys.value.value]: finalValue,
-        }
-      );
+      const obj = {};
+      lodashSet(obj, tKeys.value.label, finalValue);
+      lodashSet(obj, tKeys.value.value, finalValue);
+      return treeRef.value.getItem(finalValue)?.data || obj;
     }
     return getNodeDataByValue([finalValue], props.data, tKeys.value)[0];
   }
@@ -174,7 +171,7 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
   // only for single tree select
   const treeNodeActive: TreeProps['onActive'] = (value, ctx) => {
     if (props.multiple) return;
-    if (treeSelectValue.value === ctx.node.data[tKeys.value.value]) {
+    if (treeSelectValue.value === lodashGet(ctx.node.data, tKeys.value.value)) {
       return;
     }
     const onlyLeafNode = Boolean(
@@ -183,6 +180,7 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
         && Array.isArray(ctx.node?.data?.children)
         && ctx.node?.data?.children?.length,
     );
+
     let current: TreeSelectValue = value;
     const nodeValue = Array.isArray(value) ? value[0] : value;
     current = isObjectValue.value ? treeRef.value.getItem(nodeValue) : nodeValue;
@@ -196,9 +194,9 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
     innerInputValue.value && setInnerInputValue('', { trigger: 'change', e: ctx.e });
   };
 
-  // label could be used as TNode, then use text to filter
+  // label could be used as TdNode, then use text to filter
   const defaultFilterFunction: TreeProps['filter'] = (node) => {
-    const label = node.data[tKeys.value.label];
+    const label = lodashGet(node.data, tKeys.value.label);
     const searchLabel = isFunction(label) ? node.data.text : label || node.data.text;
     return searchLabel?.indexOf(innerInputValue.value) >= 0;
   };
@@ -238,7 +236,7 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
     if (!fitTrigger) return;
     // handle remove event
     const current = treeSelectValue.value[index];
-    const currentDeleteValue = typeof current === 'object' ? current[tKeys.value.value] : current;
+    const currentDeleteValue = typeof current === 'object' ? lodashGet(current, tKeys.value.value) : current;
     const currentNode = treeRef.value?.getItem(currentDeleteValue);
     const data = currentNode ? currentNode.data : getNodeDataByValue([currentDeleteValue], props.data, tKeys.value)[0];
     if (fitTrigger) {

src/tree-select/utils.ts

@@ -1,3 +1,4 @@
+import { get as lodashGet, set as lodashSet } from 'lodash';
 import { TreeOptionData, TreeKeysType } from '../common';
 
 export function getNodeDataByValue(
@@ -13,7 +14,7 @@ export function getNodeDataByValue(
   ) => {
     for (let i = 0, len = data.length; i < len; i++) {
       const item = data[i];
-      const index = values.findIndex((val) => item[keys.value] === val);
+      const index = values.findIndex((val) => lodashGet(item, keys.value) === val);
       if (index !== -1) {
         // results.push(item);
         results.set(values[index], item);
@@ -34,7 +35,10 @@ export function getNodeDataByValue(
   if (values.length && results.size < values.length) {
     values.forEach((value) => {
       if (!results.get(value)) {
-        results.set(value, { [keys.label]: value, [keys.value]: value });
+        const obj = {};
+        lodashSet(obj, keys.label, value);
+        lodashSet(obj, keys.value, value);
+        results.set(value, obj);
       }
     });
   }