Skip to content
On this page

select下拉框组件

https://element-plus.org/zh-CN/component/select.html

Hidden Title

基础用法:<s-select v-model="selectVal" :options="options" title="哈哈"></s-select>

属性事件插槽简介

基础用法

成华主题

chenghua基础用法

chenghua尺寸

chenghua多选

石景山主题

shijingshan基础用法

shijingshan尺寸

shijingshan多选

通常用法

高度(height,默认值:'')

使用 height="40" 设置像素高度,或在有明确高度的父容器中使用 height="100%" 填满父容器。支持数字、px、rem、百分比等 CSS 长度;父容器高度为 auto 时,百分比不能自动撑满。

尺寸

多选--隐藏多余标签的多选

调用change方法

遍历调用change方法

集成绝大部分属性和方法

customLabel自定义显示label

解析html

插槽

disabled, 设置选项不允许选择

table单选

table多选

直接传入选项

未传 options 时,可以在默认插槽中直接传入 el-option。这种写法支持 v-model、多选、快速切换以及 el-select 的原生属性和事件,快速切换会自动跳过禁用选项;全选、反选和包含完整选项上下文的 changeSelect 依赖 options 数据,使用这些功能时仍应采用 options 写法。

sybz 主题(theme 默认值:default)

设置 theme="sybz" 使用思云博智配色。theme 可选 default / chenghua / shijingshan / sybz,默认值为 default。品牌蓝 #4876EF,AI 辅助绿 #00D3AB

快速切换按钮(showQuick 默认值:true)

showQuick 可选 true / false,默认值为 true。基础写法:<s-select :options="[]" />,空选项时也显示上下按钮;设置 :show-quick="false" 隐藏按钮。

空选项占位文案(emptyPlaceholder 默认值:暂无数据)

基础写法:<s-select :options="[]" empty-placeholder="暂无可选服务" />emptyPlaceholder 支持任意字符串(包括空字符串),默认值为 暂无数据

属性

属性名说明类型默认值
modelValue当前值array / string / number-
value选项值字段名stringvalue
label选项显示字段名,支持字符串或多字段数组string / arraylabel
options选项数据array[]
type数据类型,传 simple 时按基础类型数组处理string''
multiple是否多选booleanfalse
showAll多选时是否显示全选/反选booleantrue
showPrefix是否显示前缀数量信息booleanfalse
showQuick是否显示上下快速切换按钮,仅由 showQuick 控制,空选项时仍显示booleantrue
size选择器尺寸,支持 small / default / largestring''
theme选择器主题,支持 default / chenghua / shijingshan / sybzstringdefault
title左侧标题文案string''
compTitleStyle左侧标题组件样式object{}
connect多字段 label 拼接符string/
customLabel自定义 label,参数为 { option, index, value }function-
width组件宽度string / number''
height组件高度,支持数字、px、百分比等;百分比需要父容器具有可计算的高度string / number''
emptyPlaceholder没有选项时的占位文案,优先于 placeholder 和 disPlaceholderstring暂无数据
disPlaceholder禁用态占位文案string''
customDisabled自定义禁用,参数为 { option, index, value }(context) => boolean-
url远程请求地址或方法string / function''
urlParams远程请求参数object{}
optionsExpression远程结果取值表达式string''
emptyColor选项为空时是否高亮边框booleanfalse
showTooltip选中项文本溢出时是否显示 tooltipbooleantrue
tooltipAttrs选中项溢出 tooltip 额外属性object{}
dangerouslyUseHTMLString是否将选中项溢出 tooltip 的内容按 HTML 字符串渲染booleanfalse

事件

事件名说明
update:modelValue选中值变化时触发
change值变化时触发
changeSelect组件内部切换选项时触发,参数为 { value, label, option, index };多选时各字段为数组,清空时为 undefined

命名事件函数需要显式标注类型,TypeScript 无法从模板事件反向推断脚本区函数参数。组件库已导出 SSelectChangeContext

ts
import type { SSelectChangeContext } from 'sybz-components'

function changeSelect({ value, label, option, index }: SSelectChangeContext) {
  console.log(value, label, option, index)
}
import type { SSelectChangeContext } from 'sybz-components'

function changeSelect({ value, label, option, index }: SSelectChangeContext) {
  console.log(value, label, option, index)
}

说明

  • 组件基于 el-select 封装,绝大多数原生属性都可以直接透传。
  • 多选模式下支持全选、反选和上下快速切换。
  • 默认推荐使用 options 配置;未传 options 时,也支持在默认插槽中直接书写 el-option

思云博智私有前端组件库