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.
+
+
+
+
+
+
+ {{ getLabel(value) }}
+
+
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 @@
+
+# 自定义字段
+
+后端会传来各种各样的数据。
+
+
+
+
+
+
+ {{ getLabel(value) }}
+
+
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}