diff --git a/src/select-input/useMultiple.tsx b/src/select-input/useMultiple.tsx index 9a3373e1d..868afbbd2 100644 --- a/src/select-input/useMultiple.tsx +++ b/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(() => ({ ...DEFAULT_KEYS, ...props.keys })); const tags = computed(() => { 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(() => (!tags.value || !tags.value.length ? props.placeholder : '')); diff --git a/src/select-input/useSingle.tsx b/src/select-input/useSingle.tsx index a8a2f5968..f6a5e647b 100644 --- a/src/select-input/useSingle.tsx +++ b/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) { diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx index 7c2151ed6..ab0ef06d1 100644 --- a/src/tree-select/tree-select.tsx +++ b/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[], 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, diff --git a/src/tree-select/useTreeSelect.ts b/src/tree-select/useTreeSelect.ts index 20d51a073..31b6ac482 100644 --- a/src/tree-select/useTreeSelect.ts +++ b/src/tree-select/useTreeSelect.ts @@ -2,6 +2,8 @@ import { SetupContext, ref, computed, toRefs, watch, } from '@vue/composition-api'; import isFunction from 'lodash/isFunction'; +import lodashGet from 'lodash/get'; +import lodashSet from 'lodash/set'; import { RemoveOptions, TdTreeSelectProps, TreeSelectValue } from './type'; import { TreeProps, TreeInstanceFunctions, TreeNodeValue } from '../tree'; import { usePrefixClass, useConfig } from '../hooks/useConfig'; @@ -57,7 +59,7 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo const tKeys = computed(() => ({ ...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 +91,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 => { 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 +111,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 +130,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 +172,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 +181,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 +195,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 +237,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) { diff --git a/src/tree-select/utils.ts b/src/tree-select/utils.ts index 566127a6f..eaf24c885 100644 --- a/src/tree-select/utils.ts +++ b/src/tree-select/utils.ts @@ -1,3 +1,5 @@ +import lodashGet from 'lodash/get'; +import lodashSet from 'lodash/set'; import { TreeOptionData, TreeKeysType } from '../common'; export function getNodeDataByValue( @@ -13,7 +15,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 +36,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); } }); }