Select

下拉选择面板，从页面底部弹出，支持多级联动选择及异步请求。

示例
默认用法
  1. <nut-select class="demo1-select" 
  2. :selected="demo1.selected" 
  3. :data="demo1.data" 
  4. @change="demo1Change">
  5.     {{demo1.selected}}
  6. </nut-select>

  1. export default {
  2.     data(){
  3.         return{
  4.           demo1: {
  5.               data: [
  6.                 {"n": "北京", "s": [{"n": "海淀区"},{"n": "通州区"}]},
  7.                 {"n": "上海", "s": [{"n": "浦东新区"},{"n": "其他区"}]},
  8.                 {"n": "河北省", "s": [{"n": "石家庄市", "s": [{"n": "城东区"},{"n": "城西区"}]},{"n":"秦皇岛市"}]},
  9.                 {"n": "上海", "s": [{"n": "浦东新区"},{"n": "其他区"}]},
  10.                 {"n": "上海", "s": [{"n": "浦东新区"},{"n": "其他区"}]},
  11.                 {"n": "上海", "s": [{"n": "浦东新区"},{"n": "其他区"}]},
  12.                 {"n": "上海", "s": [{"n": "浦东新区"},{"n": "其他区"}]},
  13.                 {"n": "上海", "s": [{"n": "浦东新区"},{"n": "其他区"}]},
  14.                 {"n": "上海", "s": [{"n": "浦东新区"},{"n": "其他区"}]}
  15.               ],
  16.               selected: '河北省-石家庄市-城东区'
  17.           }
  18.         }
  19.     }   
  20. }

显示内容自定义Slot
  2.           <nut-select
  3.   :selected="demo2.selected" 
  4.   :data="demo2.data"
  5.   @change="demo2Change"
  6.   class="demo-select">
  7.   <slot><a class="button button-primary">{{demo2.selected}}</a></slot>
  8. </nut-select>

  1. export default {
  2.     data(){
  3.         return{
  4.             demo2: {
  5.                 selected: '2018-11',
  6.                 data: [
  7.                     {"n":"2017","s":[{"n":"1"},{"n":"2"},{"n":"3"},{"n":"4"},{"n":"5"},{"n":"6"},{"n":"7"},{"n":"8"},{"n":"9"},{"n":"10"},{"n":"11"},{"n":"12"}]},
  8.                     {"n":"2018","s":[{"n":"1"},{"n":"2"},{"n":"3"},{"n":"4"},{"n":"5"},{"n":"6"},{"n":"7"},{"n":"8"},{"n":"9"},{"n":"10"},{"n":"11"},{"n":"12"}]},
  9.                     {"n":"2019","s":[{"n":"1"},{"n":"2"},{"n":"3"},{"n":"4"},{"n":"5"},{"n":"6"},{"n":"7"},{"n":"8"},{"n":"9"},{"n":"10"},{"n":"11"},{"n":"12"}]},
  10.                     {"n":"2020","s":[{"n":"1"},{"n":"2"},{"n":"3"},{"n":"4"},{"n":"5"},{"n":"6"},{"n":"7"},{"n":"8"},{"n":"9"},{"n":"10"},{"n":"11"},{"n":"12"}]},
  11.                     {"n":"2021","s":[{"n":"1"},{"n":"2"},{"n":"3"},{"n":"4"},{"n":"5"},{"n":"6"},{"n":"7"},{"n":"8"},{"n":"9"},{"n":"10"},{"n":"11"},{"n":"12"}]},
  12.                     {"n":"2022","s":[{"n":"1"},{"n":"2"},{"n":"3"},{"n":"4"},{"n":"5"},{"n":"6"},{"n":"7"},{"n":"8"},{"n":"9"},{"n":"10"},{"n":"11"},{"n":"12"}]},
  13.                     {"n":"2023","s":[{"n":"1"},{"n":"2"},{"n":"3"},{"n":"4"},{"n":"5"},{"n":"6"},{"n":"7"},{"n":"8"},{"n":"9"},{"n":"10"},{"n":"11"},{"n":"12"}]}
  14.                 ]
  15.             }
  16.         }
  17.     }   
  18. }

异步加载
  1.     
  2. <nut-select
  3.   :selected="demo3.selected" 
  4.   :data="demo3.data"
  5.   :async = true
  6.   @change="demo3Change"
  7.   @slideEnd="slideEnd"
  8.   class="demo-select">
  9.   <slot><a class="button button-primary">{{demo3.selected}}</a></slot>
  10. </nut-select>

  1. export default {
  2.     data(){
  3.         return{
  4.             demo3: {
  5.               selected: '1',
  6.               data: [
  7.                 {"n":"1"},{"n":"2"},{"n":"3"},{"n":"4"},{"n":"5"},{"n":"6"}
  8.               ]
  9.             }
  10.         }
  11.     }   
  12. }

Props
参数说明类型默认值可选值
data显示数据，类型为[{"n": "1","s":[{"n","2"}]}]Array——
selected选中值，每一列的显示值已‘-’分割，如设置的值本列未找到，则默认第一个，例“2017-1-2”String——
nodeKey跟数据节点值，如传入数据为[{"n":"1","b":"2"}],nodeKey配置为n，则列表显示1String—n
childKey子数据节点值，如传入数据为[{"n":"1","s":[{"n","1"}]}],childKey配置为s，则子列表为s数据String—s
async是否支持异步，当为true时，data配置一层即可，列拖动时会返回对应索引，可动态添加后面的子列，如果为异步时，滑动完会弹出蒙层，为阻止多次请求。更新列时，可以使用第二个参数来关闭蒙层，或者使用hideSelectMash来关闭蒙层Boolean—false
Slot
名称说明
显示Slot默认显示的自定义样式Slot
Events
事件名说明回调参数
slideEnd当异步开启时，每当滑动结束时触发，并且会自动弹出蒙层来阻止用户多次滑动请求多次，切记注意判断的时间，否则会造成死循环，。[数据数据],数据索引对应列（用于更新数据）
change点击确认时触发[每列选中的对象值]
Methods
事件名说明传入参数
updateSelect当异步开启时，动态添加第二列时调用符合列表数据结构（nodeKey与childKey），第二个参数为是否在更新后关闭蒙层，主要用在最后一列渲染完后使用。
showSelectMask显示蒙层，主要用于异步操作时，防止多次请求蒙曾显示文字，默认：数据加载中…
hideSelectMask隐藏蒙层，异步时更新数据完成之后，去掉蒙层使用无