From a7e3dcfd69a66acbbcd5e5f97ecf06746816487b Mon Sep 17 00:00:00 2001 From: jahnli Date: Thu, 2 Oct 2025 11:21:16 +0800 Subject: [PATCH] feat(popselect): add `label-field` and `value-field` props --- CHANGELOG.en-US.md | 8 ++ CHANGELOG.zh-CN.md | 8 ++ .../demos/enUS/custom-field.demo.vue | 103 ++++++++++++++++++ src/popselect/demos/enUS/index.demo-entry.md | 4 + .../demos/zhCN/custom-field.demo.vue | 103 ++++++++++++++++++ src/popselect/demos/zhCN/index.demo-entry.md | 4 + src/popselect/src/PopselectPanel.tsx | 16 ++- 7 files changed, 245 insertions(+), 1 deletion(-) create mode 100644 src/popselect/demos/enUS/custom-field.demo.vue create mode 100644 src/popselect/demos/zhCN/custom-field.demo.vue diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index ccf50bcf260..e9e22857527 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -1,5 +1,13 @@ # CHANGELOG +## `NEXT_VERSION` + +`NEXT_VERSION` + +### Features + +- `n-popselect` adds `label-field`, `value-field`, `children-field` props. + ## 2.43.1 `2025-09-15` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 7c0e0300828..1d123e37320 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -1,5 +1,13 @@ # CHANGELOG +## `NEXT_VERSION` + +`NEXT_VERSION` + +### Features + +- `n-popselect` 新增 `label-field`、`value-field`、`children-field` 属性 + ## 2.43.1 `2025-09-15` diff --git a/src/popselect/demos/enUS/custom-field.demo.vue b/src/popselect/demos/enUS/custom-field.demo.vue new file mode 100644 index 00000000000..a914e99bea7 --- /dev/null +++ b/src/popselect/demos/enUS/custom-field.demo.vue @@ -0,0 +1,103 @@ + +# Custom Field + +Backend would send all kinds of data. + + + + + diff --git a/src/popselect/demos/enUS/index.demo-entry.md b/src/popselect/demos/enUS/index.demo-entry.md index 151d692bec6..e57655d9d82 100644 --- a/src/popselect/demos/enUS/index.demo-entry.md +++ b/src/popselect/demos/enUS/index.demo-entry.md @@ -9,6 +9,7 @@ basic.vue size.vue scrollable.vue multiple.vue +custom-field.vue slot.vue ``` @@ -18,6 +19,8 @@ slot.vue | Name | Type | Default | Description | Version | | --- | --- | --- | --- | --- | +| children-field | `string` | `'children'` | Field name of group option children. | NEXT_VERSION | +| label-field | `string` | `'label'` | Field name of option label. | NEXT_VERSION | | multiple | `boolean` | `false` | Whether to select multiple values. | | | node-props | `(option: SelectOption \| SelectGroupOption) => object` | `undefined` | Option's DOM attrs generator. | 2.30.4 | | options | `Array` | `[]` | For details of configuration options, see [Select](select#SelectOption-Properties) | | @@ -25,6 +28,7 @@ slot.vue | scrollable | `boolean` | `false` | Whether the select menu is scrollable. | | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the Popselect. | | | value | `string \| number \| Array \| null` | `null` | Value in controlled mode. | | +| value-field | `string` | `'value'` | Field name of option value. | NEXT_VERSION | | virtual-scroll | `boolean` | `false` | Whether to enable virtual scrolling. | 2.30.4 | | on-update:value | `(value: string \| number \| Array \| null, option: SelectBaseOption \| null \| Array) => void` | `undefined` | Callback of value updating. | | diff --git a/src/popselect/demos/zhCN/custom-field.demo.vue b/src/popselect/demos/zhCN/custom-field.demo.vue new file mode 100644 index 00000000000..2cb7ab0d310 --- /dev/null +++ b/src/popselect/demos/zhCN/custom-field.demo.vue @@ -0,0 +1,103 @@ + +# 自定义字段 + +后端会传来各种各样的数据。 + + + + + diff --git a/src/popselect/demos/zhCN/index.demo-entry.md b/src/popselect/demos/zhCN/index.demo-entry.md index 25b91a9535d..7e7eebb5417 100644 --- a/src/popselect/demos/zhCN/index.demo-entry.md +++ b/src/popselect/demos/zhCN/index.demo-entry.md @@ -9,6 +9,7 @@ basic.vue size.vue scrollable.vue multiple.vue +custom-field.vue slot.vue ``` @@ -18,6 +19,8 @@ slot.vue | 名称 | 类型 | 默认值 | 说明 | 版本 | | --- | --- | --- | --- | --- | +| children-field | `string` | `'children'` | 分组选项的子选项字段名 | NEXT_VERSION | +| label-field | `string` | `'label'` | 选项的标签字段名 | NEXT_VERSION | | multiple | `boolean` | `false` | 是否为多选 | | | node-props | `(option: SelectOption \| SelectGroupOption) => object` | `undefined` | 选项的 DOM 属性生成函数 | 2.30.4 | | options | `Array` | `[]` | 配置选项内容，详情参考 [Select](select#SelectOption-Properties) | | @@ -25,6 +28,7 @@ slot.vue | render-label | `(option: SelectOption \| SelectGroupOption) => VNodeChild` | `undefined` | 控制全部选项的渲染 | | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 组件尺寸 | | | value | `string \| number \| Array \| null` | `null` | 受控模式下的值 | | +| value-field | `string` | `'value'` | 选项的值字段名 | NEXT_VERSION | | virtual-scroll | `boolean` | `false` | 是否启用虚拟滚动 | 2.30.4 | | on-update:value | `(value: string \| number \| Array \| null, option: SelectBaseOption \| null \| Array) => void` | `undefined` | 值更新的回调 | | diff --git a/src/popselect/src/PopselectPanel.tsx b/src/popselect/src/PopselectPanel.tsx index 9ec47d78232..9bccffa3576 100644 --- a/src/popselect/src/PopselectPanel.tsx +++ b/src/popselect/src/PopselectPanel.tsx @@ -63,6 +63,18 @@ export const panelProps = { }, nodeProps: Function as PropType, virtualScroll: Boolean, + labelField: { + type: String, + default: 'label' + }, + valueField: { + type: String, + default: 'value' + }, + childrenField: { + type: String, + default: 'children' + }, // deprecated onChange: [Function, Array] as PropType | undefined> } as const @@ -102,7 +114,7 @@ export default defineComponent({ SelectBaseOption, SelectGroupOption, SelectIgnoredOption - >(props.options, createTmOptions('value', 'children')) + >(props.options, createTmOptions(props.valueField, props.childrenField)) }) function doUpdateValue( @@ -236,6 +248,8 @@ export default defineComponent({ renderLabel={this.renderLabel} onToggle={this.handleToggle} onMouseenter={this.onMouseenter} + labelField={this.labelField} + valueField={this.valueField} onMouseleave={this.onMouseenter} onMousedown={this.handleMenuMousedown} showCheckmark={this.showCheckmark}