- PickerView选择器
- 代码演示
- API
PickerView选择器
PickerView 的功能类似于 Picker ,但它是直接渲染在区域中,而不是弹出窗口。
代码演示
选择器
import { Component } from '@angular/core';
@Component({
selector: 'demo-picker-view-basic',
template: `
<div>{{getValue(value)}}</div>
<PickerView [data]="seasons"
[cascade]="false"
[(ngModel)]="value"
(ngModelChange)="onChange($event)"
></PickerView>
`
})
export class DemoPickerViewBasicComponent {
seasons = [
{
label: '2013',
children: [
{
label: '春',
children: []
},
{
label: '夏',
children: []
}
]
},
{
label: '2014',
children: [
{
label: '春'
},
{
label: '夏'
}
]
}
];
value = ['2014', '夏'];
onChange(result) {
console.log(this.value, result);
}
getValue(result) {
let value = [];
let temp = '';
result.forEach(item => {
value.push(item.label || item);
temp += item.label || item;
});
return value;
}
}
API
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
data | 数据源 | Array<{value, label}> / Array<Array<{value, label}>> | - |
ngModel | 值, 格式是[value1, value2, value3] , 对应数据源的相应级层 value | Array | - |
cascade | 是否级联 | Boolean | true |
cols | 列数 | Number | 3 |
ngModelChange | 选中后的回调 | (val): void | - |
itemStyle | 每列样式 | Object | - |
indicatorStyle | indicator 样式 | Object | - |