diff --git a/src/checkbox-group/checkbox-group.ts b/src/checkbox-group/checkbox-group.ts index 6d9ae1b5b..2249463f6 100644 --- a/src/checkbox-group/checkbox-group.ts +++ b/src/checkbox-group/checkbox-group.ts @@ -117,7 +117,7 @@ export default class CheckBoxGroup extends SuperComponent { }, initWithOptions() { - const { options, value } = this.data; + const { options, value, keys } = this.data; if (!options?.length || !Array.isArray(options)) return; @@ -129,7 +129,12 @@ export default class CheckBoxGroup extends SuperComponent { value: item, checked: value?.includes(item), } - : { ...item, checked: value?.includes(item.value) }; + : { + ...item, + label: item[keys?.label ?? 'label'], + value: item[keys?.value ?? 'value'], + checked: value?.includes(item[keys?.value ?? 'value']), + }; }); this.setData({ diff --git a/src/checkbox-group/props.ts b/src/checkbox-group/props.ts index c56de1641..2ea80bfec 100644 --- a/src/checkbox-group/props.ts +++ b/src/checkbox-group/props.ts @@ -11,9 +11,14 @@ const props: TdCheckboxGroupProps = { type: Boolean, value: false, }, - /** 是否禁用组件,默认为 false。 CheckboxGroup.disabled < Checkbox.disabled ,后续新增 Form 组件后,Form.disabled 优先级最低 */ + /** 是否禁用组件。优先级:Form.disabled < CheckboxGroup.disabled < Checkbox.disabled */ disabled: { - type: Boolean, + type: null, + value: undefined, + }, + /** 用来定义 value / label 在 `options` 中对应的字段别名 */ + keys: { + type: Object, }, /** 支持最多选中的数量 */ max: { diff --git a/src/checkbox-group/type.ts b/src/checkbox-group/type.ts index 9ec5d110f..c6d34fa5e 100644 --- a/src/checkbox-group/type.ts +++ b/src/checkbox-group/type.ts @@ -4,6 +4,8 @@ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC * */ +import { KeysType } from '../common/common'; + export interface TdCheckboxGroupProps { /** * 是否开启无边框模式 @@ -14,12 +16,19 @@ export interface TdCheckboxGroupProps { value?: boolean; }; /** - * 是否禁用组件,默认为 false。 CheckboxGroup.disabled < Checkbox.disabled ,后续新增 Form 组件后,Form.disabled 优先级最低 + * 是否禁用组件。优先级:Form.disabled < CheckboxGroup.disabled < Checkbox.disabled */ disabled?: { type: BooleanConstructor; value?: boolean; }; + /** + * 用来定义 value / label 在 `options` 中对应的字段别名 + */ + keys?: { + type: ObjectConstructor; + value?: KeysType; + }; /** * 支持最多选中的数量 */ diff --git a/src/checkbox/README.en-US.md b/src/checkbox/README.en-US.md index 75066c3ff..33355f7dc 100644 --- a/src/checkbox/README.en-US.md +++ b/src/checkbox/README.en-US.md @@ -31,6 +31,7 @@ value | String / Number / Boolean | - | value of checkbox。Typescript:`string name | params | description -- | -- | -- change | `(checked: boolean, context: { value: boolean\|number\|string, label: boolean\|number\|string })` | \- + ### Checkbox External Classes className | Description @@ -49,6 +50,8 @@ name | type | default | description | required style | Object | - | CSS(Cascading Style Sheets) | N custom-style | Object | - | CSS(Cascading Style Sheets),used to set style on virtual component | N borderless | Boolean | false | \- | N +disabled | Boolean | undefined | \- | N +keys | Object | - | Typescript:`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N max | Number | undefined | \- | N name | String | - | \- | N options | Array | [] | Typescript:`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N diff --git a/src/checkbox/README.md b/src/checkbox/README.md index 82486e0a0..f6030c162 100644 --- a/src/checkbox/README.md +++ b/src/checkbox/README.md @@ -96,6 +96,7 @@ value | String / Number / Boolean | - | 多选框的值。TS 类型:`string \| 名称 | 参数 | 描述 -- | -- | -- change | `(checked: boolean, context: { value: boolean\|number\|string, label: boolean\|number\|string })` | 值变化时触发。`context` 表示当前点击项内容。 + ### Checkbox External Classes 类名 | 描述 @@ -114,6 +115,8 @@ t-class-label | 标签样式类 style | Object | - | 样式 | N custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N borderless | Boolean | false | 是否开启无边框模式 | N +disabled | Boolean | undefined | 是否禁用组件。优先级:Form.disabled < CheckboxGroup.disabled < Checkbox.disabled | N +keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型:`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N max | Number | undefined | 支持最多选中的数量 | N name | String | - | 统一设置内部复选框 HTML 属性 | N options | Array | [] | 以配置形式设置子元素。示例1:`['北京', '上海']` ,示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型:`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N @@ -125,7 +128,6 @@ default-value | Array | undefined | 选中值。非受控属性。TS 类型:`T 名称 | 参数 | 描述 -- | -- | -- change | `(value: CheckboxGroupValue, context: { value: boolean\|number\|string, label: boolean\|number\|string })` | 值变化时触发。`context` 表示当前点击项内容。 - ### CSS Variables 组件提供了下列 CSS 变量,可用于自定义样式。 diff --git a/src/checkbox/props.ts b/src/checkbox/props.ts index b5da82dfa..2ca950974 100644 --- a/src/checkbox/props.ts +++ b/src/checkbox/props.ts @@ -44,10 +44,6 @@ const props: TdCheckboxProps = { type: null, value: undefined, }, - /** 组件类名,分别用于设置 组件外层、多选框图标、主文案、内容 等元素类名 */ - externalClasses: { - type: Array, - }, /** 自定义选中图标和非选中图标。使用 Array 时表示:`[选中态图标,非选中态图标,半选中态图标]`。使用 String 时,值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标 */ icon: { type: null, diff --git a/src/checkbox/type.ts b/src/checkbox/type.ts index 8e5b64710..a351312dc 100644 --- a/src/checkbox/type.ts +++ b/src/checkbox/type.ts @@ -66,13 +66,6 @@ export interface TdCheckboxProps { type: BooleanConstructor; value?: boolean; }; - /** - * 组件类名,分别用于设置 组件外层、多选框图标、主文案、内容 等元素类名 - */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']; - }; /** * 自定义选中图标和非选中图标。使用 Array 时表示:`[选中态图标,非选中态图标,半选中态图标]`。使用 String 时,值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标 * @default 'circle'