组件

Select 选择器

选项过多时,使用下拉菜单展示并选择内容,常用于查询条件、表单、新建或修改等场景。 API文档 组件问题反馈和讨论

使用方法

  • 下拉菜单展示内容,并且可以进行选择操作。
  • 选择下拉框所有选项,多出的内容滚动条滚动,并滚动条的高度进行限制。

基础样式 #

最基础的select选择器样式,只需增加样式 nv-select;select标签有 disabled 属性时会显示成禁用样式。
<code>
显示代码

不同尺寸 #

定义了select选择器三种尺寸:大、中(默认)、小;高度分别为 40px 32px 24px; 大尺寸和小尺寸需额外增加样式 nv-select-lgnv-select-sm
<code>
显示代码

多选列表 #

可多选,tag展示已选项,只需设置 multiple 属性
<code>
显示代码

默认选中 #

页面初始化时若需要显示默认选中的选项,只需在需要显示的选项option设置selected="selected"
<code>
显示代码

自定义DOM监听事件 #

1.3.3版本后组件在原生的DOM对象上挂载了onnvchange方法,需要改变select后重新渲染页面的话可以使用此方法(需升级为1.3.3及以后的版本)。
<code>
显示代码
onnvchange 参数
属性
类型
描述
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(){}}