文档地址：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"
