Select 选择器
选项过多时,使用下拉菜单展示并选择内容,常用于查询条件、表单、新建或修改等场景。 API文档 组件问题反馈和讨论使用方法
- 下拉菜单展示内容,并且可以进行选择操作。
- 选择下拉框所有选项,多出的内容滚动条滚动,并滚动条的高度进行限制。
基础样式 #
最基础的select选择器样式,只需增加样式 nv-select;select标签有 disabled 属性时会显示成禁用样式。<code>
不同尺寸 #
定义了select选择器三种尺寸:大、中(默认)、小;高度分别为 40px 32px 24px; 大尺寸和小尺寸需额外增加样式 nv-select-lg 和 nv-select-sm。<code>
多选列表 #
可多选,tag展示已选项,只需设置 multiple 属性<code>
默认选中 #
页面初始化时若需要显示默认选中的选项,只需在需要显示的选项option设置selected="selected"<code>
自定义DOM监听事件 #
1.3.3版本后组件在原生的DOM对象上挂载了onnvchange方法,需要改变select后重新渲染页面的话可以使用此方法(需升级为1.3.3及以后的版本)。<code>
属性
|
类型
|
描述
|
---|
disabled
|
Boolean
|
禁用select元素,默认值false,入参为true时,禁用select。eg:{disabled: false}
|
selected
|
Number
|
选中value值为输入值的option,默认为false,入参为option的value值。eg:{selected: '010'}
|
remove
|
Number
|
删除value值为输入值的option,默认为false,入参为option的value值。eg:{remove: '010'}
|
beforeFn
|
Function
|
前置回调函数,在onnvchange最开始执行。eg: {beforeFn: function(){}}
|
afterFn
|
Function
|
后置回调函数,在onnvchange最后执行。eg: {afterFn: function(){}}
|