部门选择
WdDepartment
适用场景
用于选择组织架构中的各级部门
基础能力
支持绑定「关联部门模型的关联关系」字段,实现组织部门的选择
该组件目前仅支持在模型应用中使用,使用方式如下:
- 在数据模型中创建「关联关系」类型字段,关联模型选择平台预置的部门模型(模型标识:sys_department)
- 在页面编辑器中,添加表单容器,绑定上述数据模型,页面中会自动生成部门选择组件(如果默认生成了下拉选择组件,可在表单容器的字段属性中,将该字段的对应组件切换为部门选择组件)
- 预览区、应用运行态,可对组织中的部门进行选择
扩展场景
查阅表单场景实践指南,可学习了解关于表单的各类支持场景和实现方案
示例
交互式预览
组件输入状态
样式 API 示例
#wd-page-root .wd-form-item .wd-department-department {
border-color: cyan;
background-color: black;
border-width: 2px;
border-radius: 6px;
color: cyan;
}
属性
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 说明 |
---|
显示标题 | labelVisible | boolean | 默认值:true |
标题对齐 | labelAlign | string | |
标题换行 | labelWrap | boolean | |
标题位置 | layout | string | |
标题宽度 | labelWidth | string | 表单场景下默认会跟随表单容器的标题宽度配置 |
标题提示 | labelTips | string | 配置标题的工具提示内容 |
显示清空按钮 | clearable | boolean | 默认值:true |
前缀文字 | before | string | |
后缀文字 | after | string | |
前缀图标类型 | prefixType | string | 示例:"" |
前缀图标 | prefixIcon | string | 示例:"success" |
前缀图标 | prefixSrc | string | |
后缀图标类型 | suffixType | string | 示例:"inner" |
后缀图标 | suffixIcon | string | 示例:"td:folder" |
后缀图标 | suffixSrc | string | |
下方提示 | extra | string | |
支持多选 | multiple | boolean | |
可选范围 | departmentScope | array | 默认值:[] |
移动端显示下划线 | borderedH5 | boolean | 默认值:true |
PC端显示输入边框 | borderedPc | boolean | 默认值:true |
状态 | status | string | 示例:"edit" |
必填 | required | boolean | |
必填标识 | requiredFlag | boolean | 默认值:true |
必填校验提示 | requiredMsg | string | 示例:"该项为必填项" |
绑定字段 | name | string | |
标题内容 | label | string | 示例:"部门" |
选中值 | value | string | 示例:null |
占位文字 | placeholder | string | 示例:"请选择部门" |
PC端组件尺寸 | size | string |
事件
组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
值改变 | change | object
| 兼容三端 | 用户修改组件值时触发 |
属性 API
通过属性 API,可以获取组件内部的状态和属性值,可以通过$w.componentId.propertyName
来访问组件内部的值,如 $w.input1.value
,详请请参考 属性 API
只读属性名 | 属性标识 | 类型 | 说明 |
---|
绑定字段 | name | string | 表单字段的Key值,用于提交数据时,匹配数据模型字段标识。表单内需保证唯一。 |
标题内容 | label | string | |
输入值 | value | string | |
前缀文字 | before | string | 表单输入框显示前缀文字,表单提交场景下前缀文字会作为表单内容一起提交到数据模型中 |
后缀文字 | after | string | 表单输入框显示后缀文字,表单提交场景下后缀文字会作为表单内容一起提交到数据模型中 |
必填 | required | boolean | |
是否展示 | visible | boolean | 组件是否展示 |
是否禁用 | disabled | boolean | 组件是否禁用 |
是否只读 | readOnly | boolean | 组件是否只读 |
方法 API
通过方法 API,可以通过程序触发组件内部的方法,比如提交表单,显示弹窗等, 可以通过$w.componentId.methodName
来调用组件方法,如 $w.form1.submit()
方法名 | 方法标识 | 参数 | 方法说明 |
---|
设置值 | setValue | string 值 | 通过 $w.id1.setValue("weda") 设置组件值 |
设置显隐 | setVisible | boolean 显示 | 通过 $w.id1.setVisible(false) 设置组件为隐藏 |
设置禁用 | setDisabled | boolean 禁用 | 通过 $w.id1.setDisabled(true) 设置组件为禁用 |
清空值 | clearValue | 通过 $w.id1.clearValue() 清空组件值 | |
设置只读 | setReadOnly | boolean 只读 | 通过 $w.id1.setReadOnly(true) 设置组件为只读 |
触发校验 | handleValidate | 通过 $w.id1.handleValidate() 校验组件值 | |
清除校验 | clearValidate | 通过 $w.id1.clearValidate() 清除组件校验 |
样式 API
通过样式 API,可以覆盖组件中内部元素的样式来实现自定义,例如在低代码编辑器中中通过 #wd-page-root .wd-btn
即可为所有的按钮组件编写样式,通过 :scope
可以控制单个组件样式, 详细说明请参考样式 API
名称 | 类名 | 说明和示例 |
---|
根元素 | .wd-select-root | 组件最外层元素
|
H5 端根元素 | .wd-h5-select-root | 可设定 H5 端的根元素样式
|
PC 端根元素 | .wd-pc-select-root | 可设定 PC 端的根元素样式
|
小程序端根元素 | .wd-mp-select-root | 可设定小程序端的根元素样式
|
无边框状态 | .wd-select-root.is-borderless | 设置组件无边框状态样式
|
必填状态 | .wd-select-root.is-required | 设置组件必填状态样式
|
标题 | .wd-select__label | 组件标题元素
|
标题禁用状态 | .wd-select__label.is-disabled | 设置组件标题禁用状态样式
|
标题不换行 | .wd-select__label.is-nowrap | 设置组件标题不换行时状态样式
|
提示文字 | .wd-select__help | 设置组件提示文字样式
|
校验信息 | .wd-select__error | 设置组件校验信息样式
|
前缀文字 | .wd-select__text-before | 设置组件前缀文字样式
|
后缀文字 | .wd-select__text-after | 设置组件后缀文字样式
|
前缀图标 | .wd-select__icon-before | 设置组件前缀图标样式
|
后缀图标 | .wd-select__icon-after | 设置组件后缀图标样式
|
组件边框 | .wd-select-select | 组件边框、边距样式
|
组件输入禁用状态 | .wd-select-select.is-disabled | 组件禁用样式
|
版本变化
- 属性变化
- 样式变化
- widget api 变化