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 @@ /> + + +