diff --git a/src/picker/README.md b/src/picker/README.md
index dc03c0919..8c5e42fa7 100644
--- a/src/picker/README.md
+++ b/src/picker/README.md
@@ -258,6 +258,63 @@ export default {
};
```
+### Custom Columns Field
+
+```html
+
+```
+
+```js
+import { reactive } from 'vue';
+
+export default {
+ setup() {
+ const columns = [
+ {
+ cityName: 'Zhejiang',
+ cities: [
+ {
+ cityName: 'Hangzhou',
+ cities: [{ cityName: 'Xihu' }, { cityName: 'Yuhang' }],
+ },
+ {
+ cityName: 'Wenzhou',
+ cities: [{ cityName: 'Lucheng' }, { cityName: 'Ouhai' }],
+ },
+ ],
+ },
+ {
+ cityName: 'Fujian',
+ cities: [
+ {
+ cityName: 'Fuzhou',
+ cities: [{ cityName: 'Gulou' }, { cityName: 'Taijiang' }],
+ },
+ {
+ cityName: 'Xiamen',
+ cities: [{ cityName: 'Siming' }, { cityName: 'Haicang' }],
+ },
+ ],
+ },
+ ];
+
+ const customFieldName = {
+ text: 'cityName',
+ children: 'cities',
+ };
+
+ return {
+ columns,
+ customFieldName,
+ };
+ },
+};
+```
+
## API
### Props
@@ -265,6 +322,7 @@ export default {
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| columns | Columns data | _Column[]_ | `[]` |
+| columns-field-names | custom columns field | _object_ | `{ text: 'text', values: 'values', children: 'children' }` |
| title | Toolbar title | _string_ | - |
| confirm-button-text | Text of confirm button | _string_ | `Confirm` |
| cancel-button-text | Text of cancel button | _string_ | `Cancel` |
diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md
index f0b0bbf6b..bb424e006 100644
--- a/src/picker/README.zh-CN.md
+++ b/src/picker/README.zh-CN.md
@@ -281,6 +281,63 @@ export default {
};
```
+### 自定义 Columns 的结构
+
+```html
+
+```
+
+```js
+import { reactive } from 'vue';
+
+export default {
+ setup() {
+ const columns = [
+ {
+ cityName: '浙江',
+ cities: [
+ {
+ cityName: '杭州',
+ cities: [{ cityName: '西湖区' }, { cityName: '余杭区' }],
+ },
+ {
+ cityName: '温州',
+ cities: [{ cityName: '鹿城区' }, { cityName: '瓯海区' }],
+ },
+ ],
+ },
+ {
+ cityName: '福建',
+ cities: [
+ {
+ cityName: '福州',
+ cities: [{ cityName: '鼓楼区' }, { cityName: '台江区' }],
+ },
+ {
+ cityName: '厦门',
+ cities: [{ cityName: '思明区' }, { cityName: '海沧区' }],
+ },
+ ],
+ },
+ ];
+
+ const customFieldName = {
+ text: 'cityName',
+ children: 'cities',
+ };
+
+ return {
+ columns,
+ customFieldName,
+ };
+ },
+};
+```
+
## API
### Props
@@ -288,6 +345,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| columns | 对象数组,配置每一列显示的数据 | _Column[]_ | `[]` |
+| columns-field-names | 自定义`columns`结构中的字段 | _object_ | `{ text: 'text', values: 'values', children: 'children' }` |
| title | 顶部栏标题 | _string_ | - |
| confirm-button-text | 确认按钮文字 | _string_ | `确认` |
| cancel-button-text | 取消按钮文字 | _string_ | `取消` |
diff --git a/src/picker/demo/data.ts b/src/picker/demo/data.ts
index 8a6525b28..721e5a0fc 100644
--- a/src/picker/demo/data.ts
+++ b/src/picker/demo/data.ts
@@ -79,3 +79,62 @@ export const cascadeColumns = {
},
],
};
+
+export const cascadeColumnsCustomKey = {
+ 'zh-CN': [
+ {
+ cityName: '浙江',
+ cities: [
+ {
+ cityName: '杭州',
+ cities: [{ cityName: '西湖区' }, { cityName: '余杭区' }],
+ },
+ {
+ cityName: '温州',
+ cities: [{ cityName: '鹿城区' }, { cityName: '瓯海区' }],
+ },
+ ],
+ },
+ {
+ cityName: '福建',
+ cities: [
+ {
+ cityName: '福州',
+ cities: [{ cityName: '鼓楼区' }, { cityName: '台江区' }],
+ },
+ {
+ cityName: '厦门',
+ cities: [{ cityName: '思明区' }, { cityName: '海沧区' }],
+ },
+ ],
+ },
+ ],
+ 'en-US': [
+ {
+ cityName: 'Zhejiang',
+ cities: [
+ {
+ cityName: 'Hangzhou',
+ cities: [{ cityName: 'Xihu' }, { cityName: 'Yuhang' }],
+ },
+ {
+ cityName: 'Wenzhou',
+ cities: [{ cityName: 'Lucheng' }, { cityName: 'Ouhai' }],
+ },
+ ],
+ },
+ {
+ cityName: 'Fujian',
+ cities: [
+ {
+ cityName: 'Fuzhou',
+ cities: [{ cityName: 'Gulou' }, { cityName: 'Taijiang' }],
+ },
+ {
+ cityName: 'Xiamen',
+ cities: [{ cityName: 'Siming' }, { cityName: 'Haicang' }],
+ },
+ ],
+ },
+ ],
+};
diff --git a/src/picker/demo/index.vue b/src/picker/demo/index.vue
index 00e81ffbb..4a0db0976 100644
--- a/src/picker/demo/index.vue
+++ b/src/picker/demo/index.vue
@@ -64,11 +64,18 @@
/>
+
+
+