feat(picker): support keys property

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() {

src/picker-item/picker-item.wxml

@@ -19,7 +19,7 @@
       wx:for-item="option"
       data-index="{{ index }}"
     >
-      {{option.label}}
+      {{option[labelAlias]}}
     </view>
   </view>
 </view>

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<PickerColumn> \| ((item: Array<PickerValue>)  => Array<PickerColumn>)` `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<PickerValue>` `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<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N

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<PickerColumn> \| ((item: Array<PickerValue>)  => Array<PickerColumn>)` `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<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N
 default-value | Array | undefined | 选中值。非受控属性。TS 类型：`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N

src/picker/_example/base/index.wxml

@@ -13,7 +13,7 @@
   bindpick="onColumnChange"
   bindcancel="onPickerCancel"
 >
-  <t-picker-item options="{{citys}}"></t-picker-item>
+  <t-picker-item options="{{citys}}" />
 </t-picker>
 
 <t-picker

src/picker/picker.ts

@@ -28,11 +28,19 @@ export default class Picker extends SuperComponent {
     value() {
       this.updateChildren();
     },
+    keys(obj) {
+      this.setData({
+        labelAlias: obj.label || 'label',
+        valueAlias: obj.value || 'value',
+      });
+    },
   };
 
   data = {
     prefix,
     classPrefix: name,
+    labelAlias: 'label',
+    valueAlias: 'value',
   };
 
   methods = {
@@ -42,7 +50,6 @@ export default class Picker extends SuperComponent {
       this.$children.forEach((child, index) => {
         child.setData({
           value: value?.[index] || '',
-          siblingCount: this.$children.length,
         });
         child.update();
       });

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: {

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<PickerColumn> | ((item: Array<PickerValue>) => Array<PickerColumn>);
-  };
   /**
    * 确定按钮文字
    * @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;
   };
   /**
    * 标题