Skip to main content
Supported Regions:上海

WdDepartment

Department Select​

WdDepartment

Applicable Scenarios​

to choose departments at all levels in the organizational structure

Basic Capabilities​

Supports binding the "Association Relationship of the Department Model" field to enable department selection in the organization.​

This component is currently only supported in model applications. The usage is as follows:

  1. Create an 'Association Relationship' type field in the data model, and select the built-in platform department model (Model ID: sys_department) for the associated model.Image a69ddf3235f7b96acf737a6645e3df0a
  2. In the page editor, add a form container and bind it to the above data model. A department selection component will be automatically generated on the page (if a dropdown selection component is generated by default, you can switch the corresponding component of this field to the department selection component in the field properties of the form container).Image cb1d8650ddc4ce454d9f1332f4cef9ee
  3. In the preview area and application runtime, you can select departments within the organization.Image 73b5570cdf2273dafe5fc8b3a02d4b06

Extended Scenarios​

Refer to the Form Scenario Practice Guide to explore various supported scenarios and implementation solutions for forms.

Example​

Interactive Preview​

Component Input Status​

Style API Example​

#wd-page-root .wd-form-item .wd-department-department {
  border-color: cyan;
  background-color: black;
  border-width: 2px;
  border-radius: 6px;
  color: cyan;
}

Properties​

External properties received by the component

Property Name
Property Identifier
Type
Description
Display HeadlineslabelVisibleboolean

Default value: true

Title alignmentlabelAlignstring

In the scenario, the form by default follows the title alignment configuration of the form container.

Line break in headinglabelWrapboolean

If the title content is too long when closed, show one line with overflow omitted; when enabled, show with line breaks. In form scenarios, it follows the form container's title line break configuration by default.

Title positionlayoutstring

Set title display position in form component. In the scenario, it follows the title position configuration of the form container by default.

Title widthlabelWidthstring

You can enter a value with units such as px or %, for example: 200px.

In the scenario, the form follows the title width configuration of the form container by default.

Heading NotelabelTipsstring

Take effect on PC/H5

Configure tooltip content for the heading

Display clear buttonclearableboolean

Enabled, quick clear button is provided by

Default value: true

Prefix textbeforestring

The input box in the form displays the prefix text. In the form submission scenario, the prefix text is submitted as part of the form content to the data model.

suffix textafterstring

The input box in the form displays suffix text. In the scenario of form submission, the suffix text is submitted as form content to the data model together.

Prefix icon typeprefixTypestring

Select icon type

Example: ""

Prefix iconprefixIconstring

Show icon before the form input box

Example: "success"

Prefix iconprefixSrcstring

Set custom icon address

suffix icon typesuffixTypestring

Select icon type

Example: "inner"

suffix iconsuffixIconstring

Show icon in the form input box

Example: "td:folder"

suffix iconsuffixSrcstring

Set custom icon address

Prompt.extrastring

The prompt content is displayed below the input box after configuration.

support multiple selectionsmultipleboolean

beta property: When enabled, you can retrieve multi-option member data. However, multiple selection submission is not currently supported. Enable with caution.

optional rangedepartmentScopearray

Fill in the department id, then select departments within range.

Default value: []

Display underscore on mobile terminalborderedH5boolean

After closing, the mobile terminal does not show the bottom underline

Default value: true

Display input border on PCborderedPcboolean

After closing, do not display input border on PC

Default value: true

Status.statusstring

Example: "edit"

Requiredrequiredboolean
Required identifierrequiredFlagboolean

Enabled, the component will display a required asterisk tag if mandatory.

Default value: true

Required validation noterequiredMsgstring

Example: "该项为必填项"

Bound fieldnamestring

The Key value of a form field is used to match the field identifier of the data model when submitting data. It must be unique within the form.

Title content.labelstring

Example: "部门"

selected valuevaluestring

Example: null

Placeholder textplaceholderstring

Example: "请选择部门"

PC component dimensionsizestring

Size configuration is only applicable to PC and takes effect by default in form container scenarios.

Events​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
value changechangeobject
  • value: string

    输入值
Compatible with all platforms

Trigger when a user modifies a component value

Properties API​

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name
Property Identifier
Type
Description
Bound fieldnamestring

The Key value of a form field is used to match the field identifier of the data model when submitting data. It must be unique within the form.

Title content.labelstring
input valuevaluestring
Prefix textbeforestring

The input box in the form displays the prefix text. In the form submission scenario, the prefix text is submitted as part of the form content to the data model.

suffix textafterstring

The input box in the form displays suffix text. In the scenario of form submission, the suffix text is submitted as form content to the data model together.

Requiredrequiredboolean
Indicates whether to displayvisibleboolean

Whether to display the component

Whether to disabledisabledboolean

Component Disabled

Specify whether it is read-only or not.readOnlyboolean

Whether the component is read-only

Method API​

Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

Method Name
Method Identifier
Parameters
Method Description
set valuesetValuestring值

通过 $w.id1.setValue("weda") 设置组件值

Show/Hide SettingssetVisibleboolean显示

Set the component to hidden via $w.id1.setVisible(false)

Set DisabledsetDisabledboolean禁用

Set the component to disabled with $w.id1.setDisabled(true)

Clear valueclearValue

Clear the component value with $w.id1.clearValue()

Set as read-onlysetReadOnlyboolean只读

Set the component to read-only via $w.id1.setReadOnly(true)

Trigger validationhandleValidate

Validate the component value via $w.id1.handleValidate()

Clear verificationclearValidate

Clear component validation via $w.id1.clearValidate()

Style API​

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name
Class Name
Description and Examples
root element.wd-select-rootOutermost component element
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-select-root {
  /* Write CSS styles here */
}
H5 root element.wd-h5-select-rootSettable root element style for the H5 side
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-select-root {
  /* Write CSS styles here */
}
PC-side root element.wd-pc-select-rootSettable root element style for the PC side
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-select-root {
  /* Write CSS styles here */
}
Mini program root element.wd-mp-select-rootSettable root element style for mini program
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-select-root {
  /* Write CSS styles here */
}
borderless status.wd-select-root.is-borderlessSet component borderless status style
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-select-root.is-borderless {
  /* Write CSS styles here */
}
Required status.wd-select-root.is-requiredSet component required status style
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-select-root.is-required {
  /* Write CSS styles here */
}
Title..wd-select__labelComponent title element
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-select__label {
  /* Write CSS styles here */
}
Heading disable status.wd-select__label.is-disabledSet component title disable status style
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-select__label.is-disabled {
  /* Write CSS styles here */
}
Create and bind a policy Query an instance Reset the access password of an instance.wd-select__label.is-nowrapSet component title no-wrap status style
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-select__label.is-nowrap {
  /* Write CSS styles here */
}
prompt text.wd-select__helpSet the text style of the component prompt
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-select__help {
  /* Write CSS styles here */
}
Verification information.wd-select__errorSet component verification information style
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-select__error {
  /* Write CSS styles here */
}
Prefix text.wd-select__text-beforeSet component prefix text style
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-select__text-before {
  /* Write CSS styles here */
}
suffix text.wd-select__text-afterSet component suffix text style
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-select__text-after {
  /* Write CSS styles here */
}
Prefix icon.wd-select__icon-beforeSet component prefix icon style
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-select__icon-before {
  /* Write CSS styles here */
}
suffix icon.wd-select__icon-afterSet component suffix icon style
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-select__icon-after {
  /* Write CSS styles here */
}
component border.wd-select-selectcomponent border, margin style
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-select-select {
  /* Write CSS styles here */
}
Component Input Disable Status.wd-select-select.is-disabledComponent disabled style
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-select-select.is-disabled {
  /* Write CSS styles here */
}

Learn about Style API

Version Changes​

  • Property Changes
  • Style Changes
  • widget api Changes