diff --git a/src/picker-item/picker-item.ts b/src/picker-item/picker-item.ts index 46ab74c11..8be851149 100644 --- a/src/picker-item/picker-item.ts +++ b/src/picker-item/picker-item.ts @@ -21,6 +21,16 @@ export default class PickerItem extends SuperComponent { relations: RelationsOptions = { '../picker/picker': { type: 'parent', + linked(parent) { + if ('keys' in parent.data) { + const { keys } = parent.data; + + this.setData({ + labelAlias: keys?.label || 'label', + valueAlias: keys?.value || 'value', + }); + } + }, }, }; @@ -41,6 +51,8 @@ export default class PickerItem extends SuperComponent { duration: 0, // 滚动动画延迟 value: '', curIndex: 0, + labelAlias: 'label', + valueAlias: 'value', }; methods = { @@ -64,7 +76,7 @@ export default class PickerItem extends SuperComponent { }, onTouchEnd() { - const { offset } = this.data; + const { offset, labelAlias, valueAlias } = this.data; const { options } = this.properties; if (offset === this.StartOffset) { @@ -83,8 +95,8 @@ export default class PickerItem extends SuperComponent { wx.nextTick(() => { this._selectedIndex = index; - this._selectedValue = options[index]?.value; - this._selectedLabel = options[index]?.label; + this._selectedValue = options[index]?.[valueAlias]; + this._selectedLabel = options[index]?.[labelAlias]; this.$parent?.triggerColumnChange({ index, column: this.columnIndex || 0, @@ -94,9 +106,9 @@ export default class PickerItem extends SuperComponent { // 刷新选中状态 update() { - const { options, value } = this.data; + const { options, value, labelAlias, valueAlias } = this.data; - const index = options.findIndex((item) => item.value === value); + const index = options.findIndex((item) => item[valueAlias] === value); const selectedIndex = index > 0 ? index : 0; this.setData({ @@ -105,8 +117,8 @@ export default class PickerItem extends SuperComponent { }); this._selectedIndex = selectedIndex; - this._selectedValue = options[selectedIndex]?.value; - this._selectedLabel = options[selectedIndex]?.label; + this._selectedValue = options[selectedIndex]?.[valueAlias]; + this._selectedLabel = options[selectedIndex]?.[labelAlias]; }, resetOrigin() { diff --git a/src/picker-item/picker-item.wxml b/src/picker-item/picker-item.wxml index 805e6e9f6..d89affaa7 100644 --- a/src/picker-item/picker-item.wxml +++ b/src/picker-item/picker-item.wxml @@ -19,7 +19,7 @@ wx:for-item="option" data-index="{{ index }}" > - {{option.label}} + {{option[labelAlias]}} diff --git a/src/picker/README.en-US.md b/src/picker/README.en-US.md index 64dbb16cb..417a17570 100644 --- a/src/picker/README.en-US.md +++ b/src/picker/README.en-US.md @@ -7,11 +7,10 @@ name | type | default | description | required -- | -- | -- | -- | -- auto-close | Boolean | true | \- | N cancel-btn | String / Boolean / Object | true | Typescript:`boolean \| string \| ButtonProps` | N -columns | Array / Function | [] | required。Typescript:`Array \| ((item: Array) => Array)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | Y confirm-btn | String / Boolean / Object | true | Typescript:`boolean \| string \| ButtonProps`,[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N -footer | Slot | - | \- | N +footer | Slot | - | `deprecated` | N header | Boolean / Slot | true | \- | N -render-label | String / Function | - | Typescript:`(item: PickerColumnItem) => string` | N +keys | Object | - | Typescript:`KeysType` | N title | String | '' | \- | N value | Array | - | Typescript:`Array` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N default-value | Array | undefined | uncontrolled property。Typescript:`Array` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N diff --git a/src/picker/README.md b/src/picker/README.md index ce0539dff..4b4c55666 100644 --- a/src/picker/README.md +++ b/src/picker/README.md @@ -45,11 +45,10 @@ isComponent: true -- | -- | -- | -- | -- auto-close | Boolean | true | 自动关闭;在确认、取消、点击遮罩层自动关闭,不需要手动设置 visible | N cancel-btn | String / Boolean / Object | true | 取消按钮文字。TS 类型:`boolean \| string \| ButtonProps` | N -columns | Array / Function | [] | 必需。配置每一列的选项。TS 类型:`Array \| ((item: Array) => Array)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | Y confirm-btn | String / Boolean / Object | true | 确定按钮文字。TS 类型:`boolean \| string \| ButtonProps`,[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N footer | Slot | - | 已废弃。底部内容 | N header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容,值类型为 TNode 表示自定义头部内容 | N -render-label | String / Function | - | 自定义label。TS 类型:`(item: PickerColumnItem) => string` | N +keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型:`KeysType` | N title | String | '' | 标题 | N value | Array | - | 选中值。TS 类型:`Array` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N default-value | Array | undefined | 选中值。非受控属性。TS 类型:`Array` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N diff --git a/src/picker/_example/base/index.wxml b/src/picker/_example/base/index.wxml index 7ed081d98..99726bd6d 100644 --- a/src/picker/_example/base/index.wxml +++ b/src/picker/_example/base/index.wxml @@ -13,7 +13,7 @@ bindpick="onColumnChange" bindcancel="onPickerCancel" > - + { child.setData({ value: value?.[index] || '', - siblingCount: this.$children.length, }); child.update(); }); diff --git a/src/picker/props.ts b/src/picker/props.ts index 23f1d59b9..1a88d86f4 100644 --- a/src/picker/props.ts +++ b/src/picker/props.ts @@ -16,11 +16,6 @@ const props: TdPickerProps = { type: null, value: true, }, - /** 配置每一列的选项 */ - columns: { - type: null, - value: [], - }, /** 确定按钮文字 */ confirmBtn: { type: null, @@ -31,9 +26,9 @@ const props: TdPickerProps = { type: Boolean, value: true, }, - /** 自定义label */ - renderLabel: { - type: null, + /** 用来定义 value / label 在 `options` 中对应的字段别名 */ + keys: { + type: Object, }, /** 标题 */ title: { diff --git a/src/picker/type.ts b/src/picker/type.ts index 139d1fbbd..8a5ffbbb3 100644 --- a/src/picker/type.ts +++ b/src/picker/type.ts @@ -5,6 +5,7 @@ * */ import { ButtonProps } from '../button/index'; +import { KeysType } from '../common/common'; export interface TdPickerProps { /** @@ -23,14 +24,6 @@ export interface TdPickerProps { type: null; value?: boolean | string | ButtonProps; }; - /** - * 配置每一列的选项 - * @default [] - */ - columns: { - type: ArrayConstructor; - value?: Array | ((item: Array) => Array); - }; /** * 确定按钮文字 * @default true @@ -48,11 +41,11 @@ export interface TdPickerProps { value?: boolean; }; /** - * 自定义label + * 用来定义 value / label 在 `options` 中对应的字段别名 */ - renderLabel?: { - type: StringConstructor; - value?: (item: PickerColumnItem) => string; + keys?: { + type: ObjectConstructor; + value?: KeysType; }; /** * 标题