diff --git a/components/cascader/nz-cascader.component.ts b/components/cascader/nz-cascader.component.ts index 246877ab1f5..f994958abd1 100644 --- a/components/cascader/nz-cascader.component.ts +++ b/components/cascader/nz-cascader.component.ts @@ -74,6 +74,7 @@ export interface CascaderSearchOption extends CascaderOption { export interface NzShowSearchOptions { filter?(inputValue: string, path: CascaderOption[]): boolean; + sorter?(a: CascaderOption[], b: CascaderOption[], inputValue: string): number; } @@ -1207,18 +1208,20 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces const defaultFilter = (inputValue: string, p: CascaderOption[]): boolean => { let flag = false; p.forEach(n => { - if (n.label.indexOf(inputValue) > -1) { + const labelName = this.nzLabelProperty; + if (n[ labelName ] && n[ labelName ].indexOf(inputValue) > -1) { flag = true; } }); return flag; }; + const filter: (inputValue: string, p: CascaderOption[]) => boolean = - this.nzShowSearch instanceof Object && (this.nzShowSearch as NzShowSearchOptions).filter ? - (this.nzShowSearch as NzShowSearchOptions).filter : - defaultFilter; + this.nzShowSearch instanceof Object && (this.nzShowSearch as NzShowSearchOptions).filter + ? (this.nzShowSearch as NzShowSearchOptions).filter + : defaultFilter; const sorter: (a: CascaderOption[], b: CascaderOption[], inputValue: string) => number = - this.nzShowSearch instanceof Object && (this.nzShowSearch as NzShowSearchOptions).sorter; + this.nzShowSearch instanceof Object && (this.nzShowSearch as NzShowSearchOptions).sorter; const loopParent = (node: CascaderOption, forceDisabled = false) => { const disabled = forceDisabled || node.disabled; path.push(node); @@ -1241,17 +1244,20 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces const cPath = Array.from(path); if (filter(this._inputValue, cPath)) { const disabled = forceDisabled || node.disabled; - results.push({ + const option: CascaderSearchOption = { disabled, - isLeaf: true, - path : cPath, - label : cPath.map(p => p.label).join(' / ') - } as CascaderSearchOption); + isLeaf : true, + path : cPath, + [ this.nzLabelProperty ]: cPath.map(p => p.label).join(' / ') + }; + results.push(option); } path.pop(); }; - this.oldColumnsHolder[ 0 ].forEach(node => (node.isLeaf || !node.children || !node.children.length) ? loopChild(node) : loopParent(node)); + this.oldColumnsHolder[ 0 ].forEach(node => (node.isLeaf || !node.children || !node.children.length) + ? loopChild(node) + : loopParent(node)); if (sorter) { results.sort((a, b) => sorter(a.path, b.path, this._inputValue)); } diff --git a/components/cascader/nz-cascader.spec.ts b/components/cascader/nz-cascader.spec.ts index b16dde2393d..ebc71b4a445 100644 --- a/components/cascader/nz-cascader.spec.ts +++ b/components/cascader/nz-cascader.spec.ts @@ -1325,6 +1325,27 @@ describe('cascader', () => { done(); }); }); + it('should support nzLabelProperty', (done) => { + testComponent.nzShowSearch = true; + testComponent.nzLabelProperty = 'l'; + fixture.detectChanges(); + cascader.nativeElement.click(); + fixture.detectChanges(); + testComponent.cascader.inputValue = 'o'; + testComponent.cascader.setMenuVisible(true); + fixture.detectChanges(); + const itemEl1 = overlayContainerElement.querySelector('.ant-cascader-menu:nth-child(1) .ant-cascader-menu-item:nth-child(1)') as HTMLElement; + expect(testComponent.cascader.inSearch).toBe(true); + expect(itemEl1.innerText).toBe('Zhejiang / Hangzhou / West Lake'); + itemEl1.click(); + fixture.whenStable().then(() => { + expect(testComponent.cascader.inSearch).toBe(false); + expect(testComponent.cascader.menuVisible).toBe(false); + expect(testComponent.cascader.inputValue).toBe(''); + expect(testComponent.values.join(',')).toBe('zhejiang,hangzhou,xihu'); + done(); + }); + }); it('should support custom filter', (done) => { testComponent.nzShowSearch = { filter(inputValue: string, path: CascaderOption[]): boolean { @@ -1643,28 +1664,35 @@ const ID_NAME_LIST = [ { const options1 = [ { value : 'zhejiang', label : 'Zhejiang', + l : 'Zhejiang', children: [ { value : 'hangzhou', label : 'Hangzhou', + l : 'Hangzhou', children: [ { value : 'xihu', + l : 'West Lake', label : 'West Lake', isLeaf: true } ] }, { value : 'ningbo', label : 'Ningbo', + l : 'Ningbo', isLeaf: true } ] }, { value : 'jiangsu', label : 'Jiangsu', + l : 'Jiangsu', children: [ { value : 'nanjing', label : 'Nanjing', + l : 'Nanjing', children: [ { value : 'zhonghuamen', label : 'Zhong Hua Men', + l : 'Zhong Hua Men', isLeaf: true } ] } ]