文档地址：https://www.npmjs.com/package/ion-multi-picker

1. 引入

npm install ion-multi-picker --save

2.app.model中引入

import { MultiPickerModule } from 'ion-multi-picker';

imports: [

MultiPickerModule //Import MultiPickerModule

],

3.创建一个页面 ionic g page city 页面

    3.1city.model.ts中引入

    import {MultiPickerModule} from 'ion-multi-picker';

    imports: [

        IonicPageModule.forChild(FishCityPage),

    ],

    3.2 city.ts中

    dependentColumns; // 所要选择的数据

    default ='1 1-2 1-2-1'; // 默认数据

    constructor(){

        this.dependentColumns = [

            {options: [{text:'1',value:'1' },{text:'2',value:'2' },] },

            {options: [{text:'1-1',value:'1-1',parentVal:'1' },{text:'1-2',value:'1-2',parentVal:'1' },{text:'2-1',value:'2-1',parentVal:'2' },]},

            {options: [{text:'1-1-1',value:'1-1-1',parentVal:'1-1' },{text:'1-2-1',value:'1-2-1',parentVal:'1-2' }, {text:'2-1-1',value:'2-1-1',parentVal:'2-1' },]}

];

}

3.2 city.html 写入组键

默认值：{{default}}

<ion-item>

<ion-label>城市选择</ion-label>

<ion-multi-picker id="default" [multiPickerColumns]="dependentColumns" [(ngModel)] = "default" cancelText="取消" placeholder ='请选择' doneText="确定" item-content></ion-multi-picker>

</ion-item>

    注：

确定按钮值：placeholder；

取消按钮值：cancelText；

默认提示：placeholder； 

默认选择值：ngModel；

 需要选择的值: multiPickerColumns; 

 重置：showReset=true resetText ="重置";

 固定值：separator="s"