跳到主要内容

多选

WdCheckboxList

适用场景

页面中平铺选项,用户可进行多项选择操作。

基础能力说明

1、绑定「枚举」类型字段,表单容器绑定数据模型后,模型中的枚举-多选会自动渲染为多选组件,支持用户进行数据多选。可配置默认选中值(配置默认选中值时需要输入选项值,非选项名称)、组件尺寸(PC 端生效,在移动端不生效)

2、支持标题的个性化配置,包含标题的内容、对齐方式、是否换行(开启时,标题字数超过一行时换行展示;关闭时,标题字数超过一行时省略展示)、标题位置、宽度、和标题的提示语

3、支持选项的个性化配置,包含选项的下方提示、排版方向、移动端是否展示下划线

注:

  • 多选组件的选项排版方向支持横向和纵向排列,默认纵向,选择横向时,会根据选项长度自动换行;
  • 多选组件的默认选中值支持配置多个默认选项值;
  • 如果组件在表单容器中,组件尺寸,标题对齐、位置、换行、宽度默认会跟随表单容器的属性配置

了解更多的表单组件使用场景,可查阅 表单常见场景实践指南

示例

交互式预览

不同类型的多选

样式 API 自定义样式

#wd-page-root .wd-form-item .wd-checkbox-wrap.checkbox1 .wd-checkbox-label {
color: green;
}
#wd-page-root .wd-form-item .wd-checkbox-wrap.checkbox2 .wd-checkbox-label {
color: red;
}

属性

组件接收的外部传入的属性

属性名
属性标识
类型
属性分组
默认值
说明
标题内容labelstring标题"标题"-
显示标题labelVisibleboolean标题true-
标题对齐labelAlign""|"left"|"right"标题""表单场景下默认会跟随表单容器的标题对齐配置
标题换行labelWrapboolean标题false如果标题内容过长关闭时只显示一行、溢出省略;开启时换行展示。表单场景下默认会跟随表单容器的标题换行配置
标题位置layout""|"horizontal"|"vertical"标题""设置标题在表单组件的展示位置,表单场景下默认会跟随表单容器的标题的位置配置
标题宽度labelWidthstring标题-表单场景下默认会跟随表单容器的标题宽度配置
标题提示(移动端,PC端,WEB端)labelTipsstring标题-配置标题的工具提示内容
下方提示extrastring选项-配置后提示内容常显在组件下方
选项排列方式direction"vertical"|"inline"选项"vertical"-
移动端显示下划线borderedH5boolean选项true关闭后移动端不显示底部下划线
状态status"edit"|"disabled"|"readOnly"状态/校验"edit"-
必填requiredboolean状态/校验false启用后该组件强制必填,值不可为空
必填标识requiredFlagboolean状态/校验true启用后,组件若要求必填,则会显示必填星号标记
必填校验提示requiredMsgstring状态/校验"该项为必填项"启用必填,但组件值为空时的提示信息
绑定字段namestring通用"formCheckbox"提交表单时会将组件值提交保存到所配置的字段中
选项rangearray通用[{"label":"选项1","value":"1"},{"label":"选项2","value":"2"}]供用户进行选择的选项列表
选中值valuearray通用[]默认选中的选项
组件尺寸(PC端)size""|"lg"|"md"|"sm"通用""多选组件的尺寸宽度,仅在PC端生效
选项tipBlockstring通用""-

事件

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
值改变change
  • value:array多选组件选中值
兼容三端-

属性 API

通过属性 API,可以获取组件内部的状态和属性值

只读属性名
属性标识
类型
说明
绑定字段namestring表单字段的Key值,用于提交数据时,匹配数据模型字段标识。页面内需保证唯一。
输入值valuestring
标题内容labelstring
必填requiredboolean
是否展示visibleboolean组件是否展示
是否禁用disabledboolean组件是否禁用
是否只读readOnlyboolean组件是否只读

方法 API

通过方法 API,可以通过程序触发组件内部的方法,比如提交表单,显示弹窗等

方法名
方法标识
方法说明
设置值setValue通过 $w.id1.setValue("weda") 设置组件值
设置显隐setVisible通过 $w.id1.setVisible(false) 设置组件为隐藏
设置禁用setDisabled通过 $w.id1.setDisabled(true) 设置组件为禁用
清空值clearValue通过 $w.id1.clearValue() 清空组件值
设置只读setReadOnly通过 $w.id1.setReadOnly(true) 设置组件为只读
触发校验handleValidate通过 $w.id1.handleValidate() 校验组件值
清除校验clearValidate通过 $w.id1.clearValidate() 清除组件校验

样式 API

通过样式 API,可以覆盖组件中内部元素的样式来实现自定义

名称
类名
说明
根元素.wd-checkbox-root组件最外层元素
H5 端根元素.wd-h5-checkbox-root可设定 H5 端的根元素样式
PC 端根元素.wd-pc-checkbox-root可设定 PC 端的根元素样式
小程序端根元素.wd-mp-checkbox-root可设定小程序端的根元素样式
无边框状态.wd-checkbox-root.is-borderless设置组件无边框状态样式
必填状态.wd-checkbox-root.is-required设置组件必填状态样式
标题.wd-checkbox__label组件标题元素
标题禁用状态.wd-checkbox__label.is-disabled设置组件标题禁用状态样式
标题不换行.wd-checkbox__label.is-nowrap设置组件标题不换行时状态样式
提示文字.wd-checkbox__help设置组件提示文字样式
校验信息.wd-checkbox__error设置组件校验信息样式
组件本身.wd-checkbox-group组件本身元素
行内排版.wd-checkbox-group--inline组件行内排版样式
选项样式.wd-checkbox-wrap选项样式
选项禁用状态.wd-checkbox-wrap.is-disabled选项禁用状态
选项只读状态.wd-checkbox-wrap.is-disabled选项只读状态
小尺寸.wd-checkbox-wrap.size-sm小尺寸样式(仅PC端有效)
默认尺寸.wd-checkbox-wrap.size-md默认、中尺寸样式(仅PC端有效)
大尺寸.wd-checkbox-wrap.size-lg大尺寸样式
勾选状态.wd-checkbox-wrap.is-checked选项勾选状态
所有状态.wd-checkbox-wrap.is-indeterminate选项所有状态
按钮背景样式.wd-checkbox-inner选项按钮背景样式
按钮样式.wd-checkbox-inner::after选项按钮样式
文本样式.wd-checkbox-label选项内部文本样式

了解样式 API

版本变化

  • 属性变化
  • 样式变化
  • widget api 变化