Tencent · liweijie0812 · Feb 12, 2025 · Feb 12, 2025 · Feb 12, 2025 · Feb 12, 2025
@@ -317,7 +317,7 @@ describe('cascader', () => {
       await $radios[clickIndex].find(`.t-radio`).trigger('click');
       expect(onPick).toHaveBeenCalledTimes(1);
       // expect(wrapper.findAll('.t-radio-group')[0].findAll(`.t-radio__icon--checked`)).toHaveLength(1);
-      expect(onPick).toHaveBeenCalledWith({ level: 0, index: 0, value: '110000' });
+      expect(onPick).toHaveBeenCalledWith({ level: 0, index: 0, value: '110000', label: '北京市' });
       const $step = wrapper.findAll(`.${name}__step`);
       // expect($step).toHaveLength(2);
 

@@ -8,7 +8,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 checkStrictly | Boolean | false | \- | N
 closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-keys | Object | - | Typescript：`CascaderKeysType` `type CascaderKeysType = KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts) | N
+keys | Object | - | Typescript：`CascaderKeysType` `type CascaderKeysType = TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts) | N
 options | Array | [] | Typescript：`Array<CascaderOption>` | N
 placeholder | String / Slot / Function | '选择选项' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 subTitles | Array | [] | Typescript：`Array<string>` | N
@@ -19,15 +19,15 @@ defaultValue | String / Number | - | uncontrolled property | N
 visible | Boolean | false | \- | N
 onChange | Function |  | Typescript：`(value: string \| number, selectedOptions: CascaderOption[]) => void`<br/> | N
 onClose | Function |  | Typescript：`(trigger: CascaderTriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
-onPick | Function |  | Typescript：`(context: { level: number, value: string \| number, index: number }) => void`<br/> | N
+onPick | Function |  | Typescript：`(context: { value: string \| number, label: string, index: number, level: number }) => void`<br/> | N
 
 ### Cascader Events
 
 name | params | description
 -- | -- | --
 change | `(value: string \| number, selectedOptions: CascaderOption[])` | \-
 close | `(trigger: CascaderTriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
-pick | `(context: { level: number, value: string \| number, index: number })` | \-
+pick | `(context: { value: string \| number, label: string, index: number, level: number })` | \-
 
 ### CSS Variables
 

@@ -8,7 +8,7 @@
 -- | -- | -- | -- | --
 checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
 closeBtn | Boolean / Slot / Function | true | 关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`CascaderKeysType` `type CascaderKeysType = KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts) | N
+keys | Object | - | 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名。TS 类型：`CascaderKeysType` `type CascaderKeysType = TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts) | N
 options | Array | [] | 可选项数据源。TS 类型：`Array<CascaderOption>` | N
 placeholder | String / Slot / Function | '选择选项' | 未选中时的提示文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 subTitles | Array | [] | 每级展示的次标题。TS 类型：`Array<string>` | N
@@ -19,15 +19,15 @@ defaultValue | String / Number | - | 选项值。非受控属性 | N
 visible | Boolean | false | 是否展示 | N
 onChange | Function |  | TS 类型：`(value: string \| number, selectedOptions: CascaderOption[]) => void`<br/>值发生变更时触发 | N
 onClose | Function |  | TS 类型：`(trigger: CascaderTriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
-onPick | Function |  | TS 类型：`(context: { level: number, value: string \| number, index: number }) => void`<br/>选择后触发 | N
+onPick | Function |  | TS 类型：`(context: { value: string \| number, label: string, index: number, level: number }) => void`<br/>选择后触发 | N
 
 ### Cascader Events
 
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: string \| number, selectedOptions: CascaderOption[])` | 值发生变更时触发
 close | `(trigger: CascaderTriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
-pick | `(context: { level: number, value: string \| number, index: number })` | 选择后触发
+pick | `(context: { value: string \| number, label: string, index: number, level: number })` | 选择后触发
 
 ### CSS Variables
 

@@ -1,5 +1,6 @@
 import { CloseIcon, ChevronRightIcon } from 'tdesign-icons-vue-next';
 import { defineComponent, toRefs, computed, ref, toRaw, reactive, watch, onMounted, Transition } from 'vue';
+import { get as lodashGet } from 'lodash-es';
 import TPopup from '../popup';
 import { Tabs } from '../tabs';
 import { RadioValue, RadioGroup as TRadioGroup } from '../radio';
@@ -29,6 +30,7 @@ interface KeysType {
   value?: string;
   label?: string;
   children?: string;
+  disabled?: string;
 }
 
 export default defineComponent({
@@ -75,10 +77,10 @@ export default defineComponent({
         for (let i = 0, size = selectedIndexes.length; i < size; i += 1) {
           const index = selectedIndexes[i];
           const next = items[i]?.[index];
-          selectedValue.push(next[keys?.value ?? 'value']);
-          steps.push(next[keys?.label ?? 'label']);
-          if (next[keys?.children ?? 'children']) {
-            items.push(next[keys?.children ?? 'children']);
+          selectedValue.push(lodashGet(next, keys?.value ?? 'value'));
+          steps.push(lodashGet(next, keys?.label ?? 'label'));
+          if (lodashGet(next, keys?.children ?? 'children')) {
+            items.push(lodashGet(next, keys?.children ?? 'children'));
           }
         }
       }
@@ -92,11 +94,11 @@ export default defineComponent({
     const getIndexesByValue = (options: any, value: any) => {
       const keys = props.keys as KeysType;
       for (let i = 0; i < options.length; i++) {
-        if (options[i][keys?.value ?? 'value'] === value) {
+        if (lodashGet(options, options[i][keys?.value ?? 'value']) === value) {
           return [i];
         }
-        if (options[i][keys?.children ?? 'children']) {
-          const res: any = getIndexesByValue(options[i][keys?.children ?? 'children'], value);
+        if (lodashGet(options, options[i][keys?.children ?? 'children'])) {
+          const res: any = getIndexesByValue(lodashGet(options, options[i][keys?.children ?? 'children']), value);
           if (res) {
             return [i, ...res];
           }
@@ -110,19 +112,19 @@ export default defineComponent({
       selectedIndexes.length = level + 1;
       selectedValue[level] = String(value);
       selectedValue.length = level + 1;
-      steps[level] = item[keys?.label ?? 'label'] as string;
-      if (item[keys?.children ?? 'children']?.length) {
-        items[level + 1] = item[keys?.children ?? 'children'];
+      steps[level] = lodashGet(item, keys?.label ?? 'label');
+      if (lodashGet(item, keys?.children ?? 'children')?.length) {
+        items[level + 1] = lodashGet(item, keys?.children ?? 'children');
         items.length = level + 2;
         stepIndex.value += 1;
         steps[level + 1] = placeholder.value;
         steps.length = level + 2;
-      } else if (item[keys?.children ?? 'children']?.length === 0) {
+      } else if (lodashGet(item, keys?.children ?? 'children')?.length === 0) {
         childrenInfo.value = value;
         childrenInfo.level = level;
       } else {
         setCascaderValue(
-          item[keys?.value ?? 'value'],
+          lodashGet(item, keys?.value ?? 'value'),
           items.map((item, index) => toRaw(item?.[selectedIndexes[index]])),
         );
         close('finish');
@@ -138,22 +140,27 @@ export default defineComponent({
       steps[level + 1] = placeholder.value;
       steps.length = level + 1;
 
-      if (item[keys?.children ?? 'children']?.length) {
-        items[level + 1] = item[keys?.children ?? 'children'];
-      } else if (item[keys?.children ?? 'children']?.length === 0) {
+      if (lodashGet(item, keys?.children ?? 'children')?.length) {
+        items[level + 1] = lodashGet(item, keys?.children ?? 'children');
+      } else if (lodashGet(item, keys?.children ?? 'children')?.length === 0) {
         childrenInfo.value = value;
         childrenInfo.level = level;
       }
     };
 
     const handleSelect = (value: RadioValue, level: number) => {
       const keys = props.keys as KeysType;
-      const index = items[level].findIndex((item: any) => item[keys?.value ?? 'value'] === value);
+      const index = items[level].findIndex((item: any) => lodashGet(item, keys?.value ?? 'value') === value);
       const item = items[level][index];
-      if (item.disabled) {
+      if (lodashGet(item, keys?.disabled ?? 'disabled')) {
         return;
       }
-      props.onPick?.({ level, value: item[keys?.value ?? 'value'], index });
+      props.onPick?.({
+        value: lodashGet(item, keys?.value ?? 'value'),
+        label: lodashGet(item, keys?.label ?? 'label'),
+        level,
+        index,
+      });
 
       if (props.checkStrictly && selectedValue.includes(String(value))) {
         cancelSelect(value, level, index, item);

@@ -15,7 +15,7 @@ export default {
     type: [Boolean, Function] as PropType<TdCascaderProps['closeBtn']>,
     default: true,
   },
-  /** 用来定义 value / label 在 `options` 中对应的字段别名 */
+  /** 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名 */
   keys: {
     type: Object as PropType<TdCascaderProps['keys']>,
   },

@@ -4,7 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TNode, TreeOptionData, KeysType } from '../common';
+import { TNode, TreeOptionData, TreeKeysType } from '../common';
 
 export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOptionData> {
   /**
@@ -18,7 +18,7 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
    */
   closeBtn?: boolean | TNode;
   /**
-   * 用来定义 value / label 在 `options` 中对应的字段别名
+   * 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名
    */
   keys?: CascaderKeysType;
   /**
@@ -73,9 +73,9 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
   /**
    * 选择后触发
    */
-  onPick?: (context: { level: number; value: string | number; index: number }) => void;
+  onPick?: (context: { value: string | number; label: string; index: number; level: number }) => void;
 }
 
-export type CascaderKeysType = KeysType;
+export type CascaderKeysType = TreeKeysType;
 
 export type CascaderTriggerSource = 'overlay' | 'close-btn' | 'finish';
@@ -13,6 +13,10 @@ export default {
     type: Boolean,
     default: undefined,
   },
+  /** 用来定义 value / label / disabled 在 `options` 中对应的字段别名 */
+  keys: {
+    type: Object as PropType<TdCheckboxGroupProps['keys']>,
+  },
   /** 支持最多选中的数量 */
   max: {
     type: Number,
@@ -27,6 +31,11 @@ export default {
   options: {
     type: Array as PropType<TdCheckboxGroupProps['options']>,
   },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 选中值 */
   value: {
     type: Array as PropType<TdCheckboxGroupProps['value']>,

@@ -1,6 +1,8 @@
 import { provide, computed, defineComponent, toRefs } from 'vue';
+import { get as lodashGet } from 'lodash-es';
 import config from '../config';
 import props from './checkbox-group-props';
+import { KeysType } from '../common';
 import Checkbox from './checkbox';
 import { CheckboxGroupValue, TdCheckboxGroupProps, TdCheckboxProps } from './type';
 import { useDefault } from '../shared';
@@ -31,6 +33,9 @@ export default defineComponent({
       'value',
       'change',
     );
+
+    const keys = computed((): KeysType => props.keys);
+
     const optionList = getOptions(props, context.slots);
     const checkedSet = computed(() => {
       if (isArray(innerValue.value)) {
@@ -107,7 +112,13 @@ export default defineComponent({
         return (
           <span>
             {optionList.value.map((item, idx) => (
-              <Checkbox {...item} key={`${item.value || ''}${idx}`} label={item.label || item.text || ''} />
+              <Checkbox
+                {...item}
+                key={`${lodashGet(item, keys.value?.value ?? 'value', '')}${idx}`}
+                label={lodashGet(item, keys.value?.label ?? 'label', item.text || '')}
+                value={lodashGet(item, keys.value?.value ?? 'value')}
+                disabled={lodashGet(item, keys.value?.disabled ?? 'disabled')}
+              />
             ))}
           </span>
         );

@@ -21,7 +21,7 @@ maxContentRow | Number | 5 | \- | N
 maxLabelRow | Number | 3 | \- | N
 name | String | - | \- | N
 placement | String | left | options: left/right | N
-readonly | Boolean | false | \- | N
+readonly | Boolean | undefined | \- | N
 value | String / Number / Boolean | - | value of checkbox。Typescript：`string \| number \| boolean` | N
 onChange | Function |  | Typescript：`(checked: boolean, context: { e: Event }) => void`<br/> | N
 
@@ -37,9 +37,11 @@ change | `(checked: boolean, context: { e: Event })` | \-
 name | type | default | description | required
 -- | -- | -- | -- | --
 disabled | Boolean | undefined | \- | N
+keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 max | Number | undefined | \- | N
 name | String | - | \- | N
 options | Array | - | Typescript：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj extends TdCheckboxProps { text?: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
+readonly | Boolean | undefined | \- | N
 value | Array | [] | `v-model` and `v-model:value` is supported。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
 defaultValue | Array | [] | uncontrolled property。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts) | N
 onChange | Function |  | Typescript：`(value: T, context: CheckboxGroupChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/> | N