Dropdown

下拉选择组件

示例
通用数据代码和回调示例
  2.         export default {
  3.           data() {
  4.             retuen {
  5.               options: ['一','二','三','四'],
  6.               options2: [{name: '张三', id: 1}, {name: '李四', id: 2}, {name: '王五', id: 3}, {name: '马六', id: 4}, {name: '王久', id: 5}],
  7.             }
  8.           },
  9.           methods: {
  10.             selectedChange(option) {
  11.               console.log(option)
  12.             },
  13.           }
  14.         }
  15.

示例1: 单选、简单数组
  1. <nut-dropdown :options="options" @selectedChange='multipleSelected'></nut-dropdown>

示例2: 单选、简单数组、设置默认值
  1. <nut-dropdown :options="options" @selectedChange='selectedChange' defaultSelected='二'></nut-dropdown>
示例3: 多选、简单数组
  1. <nut-dropdown :options="options" multiple @selectedChange='selectedChange'></nut-dropdown>

示例4: 多选、简单数组、设置默认值
  1. <nut-dropdown :options="options" multiple @selectedChange='selectedChange' :defaultSelected="['一','二']"></nut-dropdown>
示例5: 单选、复杂对象数组、自定义展示字段
  1. <nut-dropdown :options="options2" @selectedChange='selectedChange' optionKey='name' ></nut-dropdown>
示例6: 多选、复杂对象数组、自定义展示字段
  1. <nut-dropdown :options="options2" multiple @selectedChange='selectedChange' optionKey='name'></nut-dropdown>
示例7: 单选、复杂对象数组、自定义展示字段、设置默认值
  1. <nut-dropdown :options="options2" @selectedChange='selectedChange' optionKey='name' :defaultSelected="{name: '李四', id: 2}"></nut-dropdown>
示例8: 多选、复杂对象数组、自定义展示字段、设置默认值
  1. <nut-dropdown :options="options2" multiple @selectedChange='selectedChange' optionKey='name' :defaultSelected="[{name: '李四', id: 2}]"></nut-dropdown>
示例9: 多选、复杂对象数组、自定义展示字段、支持搜索
  1. <nut-dropdown :options="options2" multiple @selectedChange='selectedChange' optionKey='name' search></nut-dropdown>
示例10: 单选、简单数组、支持搜索
  1. <nut-dropdown :options="options" @selectedChange='selectedChange' search></nut-dropdown>
Props
参数说明类型默认值是否必传
defaultSelected默认选中得值，单选传入单个得数据项，多选传入数组any—否
options下拉项options数组，可以是简单数组，也可以是复杂对象数组Array—是
optionKey当options参数是复杂对象数组的时候，传入option展示的字段名String—当options参数是复杂对象数组的时，必须
multiple是否支持多选Booleanfalsetrue/false
search是否启用组件的搜索过滤选项功能Booleanfalsetrue/false
Events
事件名说明回调参数
selectedChange当选中的option发生改变的时候触发被选中的option值，多选的时候返回选中项组成的数组