PickerView选择器

PickerView 的功能类似于 Picker ,但它是直接渲染在区域中,而不是弹出窗口。

代码演示

选择器

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'demo-picker-view-basic',
  4. template: `
  5. <div>{{getValue(value)}}</div>
  6. <PickerView [data]="seasons"
  7. [cascade]="false"
  8. [(ngModel)]="value"
  9. (ngModelChange)="onChange($event)"
  10. ></PickerView>
  11. `
  12. })
  13. export class DemoPickerViewBasicComponent {
  14. seasons = [
  15. {
  16. label: '2013',
  17. children: [
  18. {
  19. label: '春',
  20. children: []
  21. },
  22. {
  23. label: '夏',
  24. children: []
  25. }
  26. ]
  27. },
  28. {
  29. label: '2014',
  30. children: [
  31. {
  32. label: '春'
  33. },
  34. {
  35. label: '夏'
  36. }
  37. ]
  38. }
  39. ];
  40. value = ['2014', '夏'];
  41. onChange(result) {
  42. console.log(this.value, result);
  43. }
  44. getValue(result) {
  45. let value = [];
  46. let temp = '';
  47. result.forEach(item => {
  48. value.push(item.label || item);
  49. temp += item.label || item;
  50. });
  51. return value;
  52. }
  53. }

PickerView 选择器 - 图1

API

属性说明类型默认值
data数据源Array<{value, label}> / Array<Array<{value, label}>>-
ngModel值, 格式是[value1, value2, value3], 对应数据源的相应级层 valueArray-
cascade是否级联Booleantrue
cols列数Number3
ngModelChange选中后的回调(val): void-
itemStyle每列样式Object-
indicatorStyleindicator 样式Object-