Choose

级联选择面板。多用于地区选择，支持异步拉取数据。

示例
基本用法
  1. <nut-choose 
  2.         :visibile="showChoose"
  3.         :needCache="true"
  4.         @init-choose="initChoose" 
  5.         @close-choose="closeChoose" 
  6.         @choose-item="closeItem"
  7.         :listData="chooseData"></nut-choose>

事件
  1. export default {
  2.     data(){
  3.       return {
  4.         showChoose: false,
  5.         loading: false,
  6.         chooseData: []
  7.       }
  8.     },
  9.     methods:{
  10.         initChoose() {
  11.             this.chooseData = [{ 'name': '北京', 'id': 1 },
  12.                 { 'name': '上海', 'id': 2 },
  13.                 { 'name': '天津', 'id': 3 },
  14.                 { 'name': '重庆', 'id': 4 },
  15.                 { 'name': '河北', 'id': 5 },
  16.                 { 'name': '山西', 'id': 6 },
  17.                 { 'name': '河南', 'id': 7 },
  18.                 { 'name': '辽宁', 'id': 8 },
  19.                 { 'name': '吉林', 'id': 9 },
  20.                 { 'name': '黑龙江', 'id': 10 },
  21.                 { 'name': '内蒙古', 'id': 11 },
  22.                 { 'name': '江苏', 'id': 12 },
  23.                 { 'name': '山东', 'id': 13 },
  24.                 { 'name': '安徽', 'id': 14 },
  25.                 { 'name': '浙江', 'id': 15 },
  26.                 { 'name': '福建', 'id': 16 },
  27.                 { 'name': '湖北', 'id': 17 },
  28.                 { 'name': '湖南', 'id': 18 },
  29.                 { 'name': '广东', 'id': 19 },
  30.                 { 'name': '广西', 'id': 20 },
  31.                 { 'name': '江西', 'id': 21 },
  32.                 { 'name': '四川', 'id': 22 },
  33.                 { 'name': '海南', 'id': 23 },
  34.                 { 'name': '贵州', 'id': 24 },
  35.                 { 'name': '云南', 'id': 25 },
  36.                 { 'name': '西藏', 'id': 26 },
  37.                 { 'name': '陕西', 'id': 27 },
  38.                 { 'name': '甘肃', 'id': 28 },
  39.                 { 'name': '青海', 'id': 29 },
  40.                 { 'name': '宁夏', 'id': 30 },
  41.                 { 'name': '新疆', 'id': 31 },
  42.                 { 'name': '台湾', 'id': 32 }];
  43.         },
  44.         closeChoose() {
  45.             this.showChoose = false;
  46.             console.log('关闭了弹框');
  47.         },
  48.         closeItem(item,level) {
  49.             console.log('当前选中的数据:');
  50.             console.log(item);
  51.             let self = this;
  52.             if(level == 1) {
  53.                 self.chooseData = [
  54.                     {
  55.                     "id": 2816,
  56.                     "name": "密云区"
  57.                     },
  58.                     {
  59.                     "id": 72,
  60.                     "name": "朝阳区"
  61.                     }
  62.                 ];
  63.             }
  64.             if(level == 2) {
  65.                 self.closeChoose();
  66.             }
  67.         }
  68.     }
  69. }

Props
参数说明类型默认值可选值
visibile打开和关闭选择弹层Booleanfalsetrue
short短的面板还是长的面板Booleanfalsetrue
loading是否还在异步加载数据中Booleanfalsetrue
needCache弹层打开后再关闭是否需要缓存下来数据，以备下次打开使用Booleanfalsetrue
title选择弹层标题String所在地区—
onlyKey列表数据对象中，区分每条数据的key名，如'id'Stringid—
contentKey列表数据对象中，用于显示到列表中的字段key名，如'name'Stringname—
listData弹层列表数据Array[]—
Events
事件名说明回调参数
init-choose打开选择弹层时给列表初始化数据入口—
close-choose关闭选择弹层时的回调—
choose-item选择某一条选项时的回调item:当前选中的数据，index: 当前操作的所处层级