diff --git a/src/cascader/README.md b/src/cascader/README.md index fdd206932..cc9330993 100644 --- a/src/cascader/README.md +++ b/src/cascader/README.md @@ -134,6 +134,44 @@ export default { }; ``` +### Custom Field Names + +```html + +``` + +```js +export default { + data() { + return { + cascaderValue: '', + fieldNames: { + text: 'name', + value: 'code', + children: 'items', + }, + options: [ + { + name: 'Zhejiang', + code: '330000', + items: [{ name: 'Hangzhou', code: '330100' }], + }, + { + name: 'Jiangsu', + code: '320000', + items: [{ name: 'Nanjing', code: '320100' }], + }, + ], + }; + }, +}; +``` + ## API ### Props @@ -146,6 +184,7 @@ export default { | placeholder | Placeholder of unselected tab | _string_ | `Select` | | active-color | Active color | _string_ | `#ee0a24` | | closeable | Whether to show close icon | _boolean_ | `true` | +| field-names `v2.12.4` | Custom the fields of options | _object_ | `{ text: 'text', value: 'value', children: 'children' }` | ### Events diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md index d5d6bc81e..7e4d8fbfc 100644 --- a/src/cascader/README.zh-CN.md +++ b/src/cascader/README.zh-CN.md @@ -146,18 +146,59 @@ export default { }; ``` +### 自定义字段名 + +通过 `field-names` 属性可以自定义 `options` 里的字段名称。 + +```html + +``` + +```js +export default { + data() { + return { + cascaderValue: '', + fieldNames: { + text: 'name', + value: 'code', + children: 'items', + }, + options: [ + { + name: '浙江省', + code: '330000', + items: [{ name: '杭州市', code: '330100' }], + }, + { + name: '江苏省', + code: '320000', + items: [{ name: '南京市', code: '320100' }], + }, + ], + }; + }, +}; +``` + ## API ### Props -| 参数 | 说明 | 类型 | 默认值 | -| ------------ | ------------------ | ------------------ | --------- | -| title | 顶部标题 | _string_ | - | -| value | 选中项的值 | _string \| number_ | - | -| options | 可选项数据源 | _Option[]_ | `[]` | -| placeholder | 未选中时的提示文案 | _string_ | `请选择` | -| active-color | 选中状态的高亮颜色 | _string_ | `#ee0a24` | -| closeable | 是否显示关闭图标 | _boolean_ | `true` | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| title | 顶部标题 | _string_ | - | +| value | 选中项的值 | _string \| number_ | - | +| options | 可选项数据源 | _Option[]_ | `[]` | +| placeholder | 未选中时的提示文案 | _string_ | `请选择` | +| active-color | 选中状态的高亮颜色 | _string_ | `#ee0a24` | +| closeable | 是否显示关闭图标 | _boolean_ | `true` | +| field-names `v2.12.4` | 自定义 `options` 结构中的字段 | _object_ | `{ text: 'text', value: 'value', children: 'children' }` | ### Events diff --git a/src/cascader/demo/index.vue b/src/cascader/demo/index.vue index 314ecc998..d1192e1fa 100644 --- a/src/cascader/demo/index.vue +++ b/src/cascader/demo/index.vue @@ -79,12 +79,40 @@ /> + + + + + + +