Data Table

WdTable

Practical Guide

• Implementing Batch Updates in Data Tables

• Form/Table Component Binding query Practice

• Implement Merged Columns Display in Table Components

• Table Column JSON Expression Writing Guide

• Implementing Pagination Caching in Data Tables

Applicable Scenarios

Display multiple rows of data in tabular form, supporting data sorting, searching, pagination, and customization of display content and operations.

Basic Capabilities Description

Model Page Automatically Generates Table Components

When creating model applications and model pages, the table component is automatically generated on the data management table page, establishing associations with data creation/update/view pages to implement corresponding page navigation logic.

Configure Table Data

Table data can be selected from data tables or bound expressions.

1. Quickly select a data table

As shown below, directly select a data table and configure query parameters. Table requests automatically include features such as pagination, sorting, and filtering. Clicking the upper-right corner navigates to the management backend of that data table to view data.

2. Binding Expression

Expressions can be static data or variables. You can connect to built-in data tables and external APIs, etc., via Query, and then bind a query in the expression.

For specific implementation, refer to the data list binding a query to implement dynamic pagination

3. Binding APIs (removed in the latest version)

NoteStarting from the v2.30.0 component version, APIs invocation for Data Table has been removed. Please use expressions to select Query for querying APIs.

Parameter Requirements for Calling APIs

1. When the 'Data Source Type' is set to APIs, you can bind an APIs method to query data and display it in the table. The method must include the following input/output parameters and meet relevant requirements.

   1. Method input parameters:

      • pageNo: Page number
      • pageSize: Page size
      • orderBy: Sort field name. Can be any field in the output parameter 'records' (optional; sorting control will be unavailable if this parameter is omitted).
      • orderType: Sort order. Pass 'asc' for ascending order or 'desc' for descending order (optional; sorting control will be unavailable if this parameter is omitted).

   2. Method output parameters:

      • total: Total number of records
      • records: An array of objects containing multiple data records, with each object representing table column fields. Note: Each object in the array must contain a unique identifier field _id (text type) for pagination features like page turning to function properly.

   3. Field identifiers must exactly match the identifiers above and be top-level parameters; they cannot be nested within other object parameters. You can refer to the parameter format of the "query list method" in any data model.

2. For the input/output parameter format of APIs connector methods, refer to the preset "query list" method parameters in any data model.

   

Set table column sorting

Table columns are sorted by default according to the field order in the bound data model. You can drag to adjust column order in the 'Column Management' properties.

Add Table Columns

Table columns do not display system fields by default, including "data identifier, creation time, update time, owner, created by, modified by, belonging department". You can click the "Add Column" button in the "Column Management" properties to add system fields or previously deleted fields.

Column Settings

When a column item in "Column Management" is selected, a column settings pop-up window will be displayed, allowing configuration of the column header, content display type, column width, alignment, sorting, exporting, and other effects.

Field Query Scope Settings

Data tables, after supporting the v2 query protocol, enable on-demand configuration of field query scopes to improve query performance. Field Query Scope Settings support the following three methods:

• All Fields: returns all fields, including those from this table and associated tables.
• Table Column Fields: returns all fields of the current table, excluding fields from associated tables. (default setting)
• Custom Query Fields: supports on-demand configuration of main table fields to be returned and whether to return associated table fields.

Mobile-Side Operations Column Configuration

• On the pc side, the operation column area is located in the last column of the table. On the h5 side, the operation column area is displayed in a pop-up window, triggered by configuring a click event on the table row to invoke the method for opening the operation column pop-up.

Extended Scenarios Description

Configuring Custom Columns for Customized Display Content and Styles

1. Set the table column's display content property to "custom content" to create a slot that allows other components to be placed.
2. The properties of components within the slot can access current row information through expressions. For example: drag a text component into the slot of a custom column, select the component, click the data binding button on the right side of the "Text Content" property, then select row data fields or write other function content in the expression editor to display the required information.

Defining Dynamic Row Background

Table component supports evaluating row data content to display different background colors, example below:

1. In "Code Editor - Current Page - handler", create a new method

export default function ({ event, data }) {
  // In event.detail, values such as record, rowkey, and recordIndex can be obtained for determining and controlling the row background color.
  return event.detail.recordIndex % 2 === 0
    ? 'rgb(199,237,204)'
    : 'rgb(250,249,222)';
}

2. In the table component's "Row Background Color" property, click the data binding button to open the pop-up, then enter $w.page.handler.color in the expression module to make odd and even rows display different backgrounds.

Operation column button navigates to the form page, passing the current row data's _id parameter to achieve data editing and updating

1. In the operation column node of the table component, drag and place a button component.

2. Adjust the button content to "Edit"; to ensure the button style is appropriate and aesthetically pleasing, you can also change the button type to a link.

   

3. Create a form page, place a form container component, bind the same data model as the table component, and set the form scenario to update.

4. Then, in the outline tree, select the page node, create a URL parameter named "id", and bind this parameter to the form container's data identifier property.

   

5. Return to the table page, select the button component added earlier, configure the On Click event - to open the table page configured earlier, and bind an expression to the page parameter id by selecting the 'Data Identifier' field.

   

6. After completing the above configurations, clicking the "Edit" button will navigate to the form page, display the form data for editing. After modification, click the "Submit" button to update the data and return to the table page.

   

Get the selected value of the checkbox column

The "Selected Row Change" event of the table component can retrieve the data information of the selected multiple rows.

1. The "Selected Row Change" event of the table component can retrieve the data information of the selected multiple rows, which can be assigned to a variable in array format.

   

Custom Configuration Filter

1. The 'Filter' property of the table component supports variable binding to implement custom filter configurations.

2. Variable Binding Example

({filterConfig:[
    {
        name: '_id',
        value: '111',
        label: 'Data Identifier111',
        filterType:'search_ci',
        filterTypeOption:['search_ci']

    },
       {
        name: 'createdAt',
        value: ['2023-07-04 00:00:00','2023-08-17 00:00:00'],
        label: 'Creation Time111',

    },
       {
        name: 'date',
        value:['2023-07-04','2023-08-17 00:00:00'],
        label: 'Date111',

    },
       {
        name: 'mjdx11',
        value:'110101',

    },
       {
        name: 'mjdx',
        value:['110101','110102'],
        label: 'Enum Multi-select111',

    },{
        name:'belx',
        value:[true, false, null]
    },
    {
        name: 'glgxddy',
        label: 'Many-to-One Association',
        relationFieldName: 'dh', // Configures the display name for association relationship options, corresponding to the 'name' field value in the data source
        value:'36789d86636cf9590079242c054308e8'
    }

]})

3. Field Property Description

Property	Description	Type	Default Value	Required
name	The name value of the filter field, corresponding to the name value of the data source field	string	-	Yes
label	Custom Title	string	Data Source Field Name	No
value	Initial value of the filter field	string/string[]	-	No
filterType	Default filter calculation method	string	Refer to the default filter value list	No
filterTypeOption	List of supported calculation methods for the filter field	string[]	Refer to the default filter value list	No
relationFieldName	Configures the display name for relationship filter options, corresponding to the 'name' field value of the data source	string[]	Displays main column field by default	No

4. Filter Default Value List

Data Source Field	List of Default Supported Calculation Methods		Default Calculation Method
Date/Time/Number/Age Field
	Range	scope	scope
	Equals	eq
	Not Equals	neq
	Greater Than	gt
	Less Than	lt
	Greater Than or Equal To	gte
	Less Than or Equal To	lte
String/Email/URL/Mobile Number/Telephone Number/Chinese Name Fields
	Contains	search_ci	search_ci
	Does Not Contain	nsearch_ci
	Equals	eq
	Not Equals	neq
	Starts With	startWith
Boolean Field / Enum Multiple Selection
	Equals Any	in	in
	Not Equals Any	nin
Enum Single Select / Master-Detail / Relationship
	Equals	eq	eq
	Not Equals	neq

Note:

• The value range of the default filter calculation method (filterType) is the value of the calculation methods supported by the corresponding data source field.
• The filter option list (filterTypeOption) is an array of the value of calculation methods supported by the corresponding data source field. If not provided, it defaults to the list of calculation methods supported by that field.

5. The real-time filter configuration can be accessed via $w.componentId.filterConfig

Example

Interactive Preview

Style API Custom Styles

// Table styles need to be used in conjunction with id selectors.
#wd-page-root .wd-table {
  background-color: #ecebf6;
}
#wd-page-root .wd-table__header {
  background-color: #d7d3f0;
}
#wd-page-root .wd-table--bordered {
  border: 1px solid #d7d3f0;
}

CSS Variables Custom Styles

#wd-page-root .wd-table {
  // Table background color
  --wd-table-color-bg: #f7ffee;
  // Hover row background color
  --wd-table-row-color-bg-hover: #c7e1bf;
  // Table header background color
  --wd-table-header-color-bg: #c7e1bf;
  // Selected row color
  --wd-table-row-color-bg-selected: #cadbc0;
  // Table border color
  --wd-table-color-border: #c7e1bf;
  // Default table row height (medium row height)
  --wd-table-td-height-md: 70px;
}

Properties

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

属性名	属性标识	类型	说明

数据源	dataSourceType	string	选择数据源类型 示例："data-model"
数据模型	bindMetadata	object	数据模型字段发生变化时，点击上方刷新图标同步数据模型结构；字段新增时，可通过下方列管理-添加列，配置最新字段表格列展示。 展示数据的数据来源，包括数据模型/视图
表达式	dataSourceData	array	新特性：表格追加绑定表达式数据，原APIs路径优化为表达式。表格展示的数据，格式为数组。查看示例 表格展示的数据，可选择变量。
数据主键	recordKey	string	用于区分不同的数据，影响行选择、行编辑等功能。一般采用数据库中唯一自增ID。 用于区分不同的数据，影响行选择、行编辑等功能。一般采用数据库中唯一自增ID。 示例："_id"
数据加载状态	loading	boolean	开启后会展示数据加载中状态
数据筛选	queryCondition	array	点击fx支持编辑数据筛选表达式 查看格式 对数据进行筛选过滤
排序方式	orderType	string	可设置升序或降序，绑定表达式时，升序传值asc，降序传值desc 默认值："desc"
启用多字段排序	isSupportMultipleSort	boolean	示例：false
数据排序	sorter	array	可设置数据排序规则，支持拖拽调整排序优先级，数组下标越小优先级越高。绑定数据示例：[{"orderBy":"updatedAt","orderType":"desc"}],升序传值asc，降序传值desc 示例：[ { "orderBy": "updatedAt", "orderType": "desc", "label": "更新时间" } ]
筛选器	filterFields	object	通过开启fx、绑定表达式，可配置默认筛选值、默认筛选方式等功能 查看示例 配置表格运行态的筛选器，支持对象类型数据绑定，属性字段为filterConfig 示例：{}
APIs	bindConnectMetadata	object	展示数据的 APIs 来源选择
调用方法	connectorMethod	object	方法的出入参需满足组件要求，查看文档 进行数据的 APIs 调用方法选择
查询入参	connectorParams	string	对APIs 调用方法获取的数据进行筛选过滤。例如 {name:'',value:''}
字段查询范围	selectFieldType	string	仅查询范围中的字段，可在表格自定义列中被引用，详情参考字段查询范围配置说明 默认查询表格列字段 默认值："table"
自定义查询字段	selectFields	array
列管理	columnSets	array	配置表格列，支持拖拽调整列排序 示例：[]
操作列(最后一列)	enableCellCustomOption	boolean	h5端操作列区域以弹窗形式展示，详情参考配置 开启后，可拖拽按钮等组件，放入大纲树的操作列节点或表格的操作列区域 示例：true
显示关联/枚举字段标签	enableRelationTag	boolean	开启后，表格中的关联关系、枚举字段默认以标签形式展示 默认值：true
操作列标题	customOptionTitle	string	默认值："操作"
左冻结	fixedFront	string	冻结首列至所选列，仅PC端生效 左冻结与右冻结属性配置的列出现交叉重复时，为避免表格的横向滚动锁定，冻结属性会自动失效
右冻结	fixedEnd	string	冻结所选列至尾列，仅PC端生效 左冻结与右冻结属性配置的列出现交叉重复时，为避免表格的横向滚动锁定，冻结属性会自动失效
数据选择	columnSelectType	string	控制表格数据选择列的样式 默认值："select"
禁用行选择	rowDisabled	object	禁用表格行选择功能，可以根据给定的记录判定是否禁用（禁用的记录将不可选）
空状态提示	emptyText	string	无数据时的提示说明，内容为空时则不显示该提示 默认值："暂无数据"
行背景颜色	rowColor	string	设置固定值或绑定低码方法，实现行背景颜色的改变
表头在页面顶部悬停	isSuspendHeader	boolean	仅PC端有效；且可能因为父级组件的样式干扰，导致该属性失效 如无法生效，请确保祖先元素没有设置overflow属性为hidden、scroll或auto。这些属性会导致position: sticky失效。另外，如果页面已经有fixed的元素，那么悬停有可能会看不到，需要通过样式手动调整下悬停的位置 默认值：true
开启表格底部内容插槽	enableBottomTipSlot	boolean	开启后，可支持表格底部内容插槽
显示分页器	enablePagination	boolean	开启后，可支持表格分页 默认值：true
每页行数	defaultPageSize	number	配置PC端表格默认的每页行数 默认值：10
PC端默认页码	defaultPageIndex	number	配置PC端表格默认的初始页码 默认值：1
分页器在页面底部悬停	isSuspendFooter	boolean	仅PC端有效；且可能因为父级组件的样式干扰，导致该属性失效 如无法生效，请确保祖先元素没有设置overflow属性为hidden、scroll或auto。这些属性会导致position: sticky失效。另外，如果页面已经有fixed的元素，那么悬停有可能会看不到，需要通过样式手动调整下悬停的位置 默认值：true
启用服务端分页	enableTotal	boolean	默认为客户端分页，启用后可实现动态加载数据 开启后，可支持服务端分页 示例：false
数据总数	total	number	默认为表达式输入的数组长度，请输入数据表实际数据总数。详见后端分页指引 默认为表达式输入的数组长度，请输入数据表实际数据总数。
行高调节按钮	enableTableHeightSizeBtn	boolean	开启后，可支持调节行高 默认值：true
全局按钮	enableGlobalButton	boolean	开启后，可拖拽按钮等组件，放入大纲树的全局按钮节点或表格的全局按钮区域 示例：true
刷新按钮	enableRefreshBtn	boolean	开启后，可展示刷新按钮 默认值：true

Events

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

事件名	事件code	事件出参 event.detail	适用情况	说明

点击表格行	tabTableRow	object record: array选中行记录 选中行记录 object rowKey: string选中行记录id 选中行记录id recordIndex: number选中行index 选中行index	移动端,PC端	点击表格某一行时触发
点击表格列	cellClick	object record: array选中行记录 选中行记录 object column: array选中列表头 选中列表头 object rowKey: string选中行记录id 选中行记录id recordIndex: number选中行index 选中行index columnIndex: number选中列index 选中列index	移动端,PC端	点击表格某一列时触发
选中行改变	rowsSelected	object data: array选中行记录 选中行记录 object	移动端,PC端	点击数据选择（多选/单选列），改变已选中的行时触发
查询成功	querySuccess	object data: object 查询结果,查询条件 查询结果,查询条件 data: query:	移动端,PC端	每次数据查询成功时均会触发，包括切换分页、修改筛选条件时
查询为空	queryEmpty	object data: object 查询结果,查询条件 data: query:	移动端,PC端	每次数据查询成功时均会触发，包括切换分页、修改筛选条件时
查询失败	queryFail	object error: object 错误信息 组件内部抛出的错误信息 requestid: string请求 id 如果是接口相关错误会提供请求 id message: string错误提示信息 code: string错误码 original: 原始错误	移动端,PC端	每次数据查询失败时均会触发，包括切换分页、修改筛选条件时
点击排序	sort	object sort: array当前引起变更的排序信息 当前引起变更的排序信息 object orderType: string orderBy: string	移动端,PC端	点击排序
点击刷新按钮	onRefreshBtnClick		移动端,PC端	点击刷新按钮
分页变化	onPagingChange	object query: object 分页信息 分页信息 pageIndex: number pageSize: number	移动端,PC端	分页变化
筛选器值变化	onFilterChange	object searchValues: object 变更的目标值 变更的目标值 key: string val: string rel: string filterConfig: array object name: string数据源字段 数据源字段的name值 label: string筛选字段标题 value: 筛选字段值 filterType: string默认筛选计算方式 filterTypeOption: array string筛选字段支持的计算方式列表	移动端,PC端	筛选面板搜索值变化/搜索触发回调
选中行(已废弃)	rowsSelect		移动端,PC端	点击数据选择（多选/单选列），改变已选中的行时触发。可通过$w.组件id.selectedRecords获取选中行的详细数据。

Property API

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名	属性标识	类型	说明

数据源	dataSourceType	string	选择数据源类型
数据模型	bindMetadata	object	展示数据的数据来源，包括数据模型/视图
表达式	dataSourceData	array	表格展示的数据，可选择变量。
数据主键	recordKey	string	用于区分不同的数据，影响行选择、行编辑等功能。一般采用数据库中唯一自增ID。
列管理	columnSets	array	配置表格列，支持拖拽调整列排序
每页行数	defaultPageSize	number	配置PC端表格默认的每页行数
PC端默认页码	defaultPageIndex	number	配置PC端表格默认的初始页码
表格数据	records	array	表格数据
表格数据总数	total	number	表格数据总数
页码	pageNo	number	表格当前页码
页长	pageSize	number	每页显示行数
表格选中数据	selectedRecords	array	表格选中的数据
错误信息	error	object	组件内部抛出的错误信息
表格排序的数据	sort	array	表格排序的数据，用于表格请求查询，格式与当前数据源协议一致。详见查询协议示例
表格筛选的数据	filter		表格排序的数据，用于表格请求查询，格式与当前数据源协议一致。详见查询协议示例
数据源协议版本	dataSourceVersion	string	数据源类型为数据模型时，当前表格支持的数据源协议版本
筛选面板的配置	filterConfig	array	筛选面板的配置
表格行数据实时值	value	array	表格行数据的实时值，用于获取自定义插槽内表单组件的值。

Method API

通过方法 API，可以通过程序触发组件内部的方法，比如提交表单，显示弹窗等, 可以通过$w.componentId.methodName来调用组件方法，如 $w.form1.submit()

方法名	方法标识	参数	方法说明

数据导入	import		仅当数据源为数据模型场景时支持导入，可按照模版，上传 excel 文件，录入数据
数据导出(可选导出模式)	exportOptionalMode		支持将表格数据导出为excel，可选：导出全部数据、筛选后的数据、选中数据
数据导出(导出选中数据)	export		支持将当前选中数据导出为 excel
删除单条数据	deleteOne	string删除数据的标识	仅当数据源为数据模型场景时，支持删除行数据
删除选中数据	deleteSelected		仅当数据源为数据模型场景时，支持删除当前选中的行记录
刷新表格(查看第1页数据)	refresh		刷新表格(查看第 1 页数据)
刷新表格(查看当前页数据)	refreshKeepPage		刷新表格(查看当前页数据)
打开操作列弹窗(仅移动端生效)	openOperationDialog		打开操作列弹窗
重置筛选器	resetFilter		重置筛选器
清空选中项	clearSelection		清空选中项
设置行选中	setSelectedKeys	object selectedKeys: array数据标识 设置行选中。数据标识字段默认为_id，表达式场景可以通过数据主键来指定其他字段。默认示例：[id1,id2]，其中id1和id2对应选中行数据标识。 string数据标识	设置行选中

Style API

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称	类名	说明和示例

根元素	.wd-table-wrap	数据表格组件根元素 /* :scope 指的是当前组件元素 */ /* 具体可参考样式 API 文档 */ :scope.wd-table-wrap { /* 在这里编写CSS 样式 */ }
PC 端表格组件根元素	.wd-pc-table	可以为 PC 端的表格编写样式 /* :scope 指的是当前组件元素 */ /* 具体可参考样式 API 文档 */ :scope.wd-pc-table { /* 在这里编写CSS 样式 */ }
H5 端表格组件根元素	.wd-h5-table	可以为 H5 端的表格编写样式 /* :scope 指的是当前组件元素 */ /* 具体可参考样式 API 文档 */ :scope.wd-h5-table { /* 在这里编写CSS 样式 */ }
表头文字样式	.wd-table__box th>div	表头文字样式 :scope .wd-table__box th>div { font-size: 20px; color: gray; }
表头背景样式	.wd-table__box th	表头背景样式 :scope .wd-table__box th { background-color: red; }
表格文字样式	.wd-table__box td>div	表格文字样式 :scope .wd-table__box td>div { font-size: 20px; color: gray; }
表格文字样式	.wd-table__box td	表格文字样式 :scope .wd-table__box td { background-color: lightgray; height: 36px; }
表格内容文本元素	.wd-table__box td .wd-text-overflow	表格筛选面板根元素 :scope .wd-table__box td .wd-text-overflow { border: 2px solid gray; border-radius: 10px; }
表格主体样式	.wd-table	表格主体样式 :scope .wd-table { border: 2px solid gray; border-radius: 10px; }
表格筛选面板根元素	.wd-table	表格筛选面板根元素 .wd-table-wrap-filter__body { border: 2px solid gray; border-radius: 10px; }

了解样式 API

CSS Variables

.wd-table-wrap {
  // Default background color
  --wd-table-color-bg: var(--wd-color-bg-container);
  // Table header background color
  --wd-table-header-color-bg: var(--wd-color-bg-secondarycontainer);

  // Row background color - default
  --wd-table-box-header-tr-color-bg: transparent;
  // Row background color - hover
  --wd-table-row-color-bg-hover: var(--wd-color-bg-container-hover);
  // Row background color - selected state
  --wd-table-row-color-bg-selected: var(--wd-color-brand-light);

  // Table text font size
  --wd-table-font-size: var(--wd-font-size-default);
  // Table text color
  --wd-table-color-text: var(--wd-color-text-default);
  // Table text font-weight
  --wd-table-color-text-weight: var(--wd-color-text-default);

  // Header text color
  --wd-table-header-color-text: var(--wd-color-text-default);
  // Header text font-weight
  --wd-table-header-font-weight: var(--wd-font-weight-medium);

  // Table row height - low
  --wd-table-td-height-sm: 3rem;
  // Table row height - medium
  --wd-table-td-height-md: 3.375rem;
  // Table row height - high
  --wd-table-td-height-lg: 5.125rem;

  // Table outer border color
  --wd-table-color-border: var(--wd-color-border-default);
  // Table inner border color
  --wd-table-color-border-inner: var(--wd-color-border-separator);

  // Table rounded corners
  --wd-table-border-radius: calc(var(--wd-border-radius) * 2);

  // Mobile bottom button area border color
  --wd-table-footer-border-color: var(--wd-color-border-default);
}

Version Changes

• This upgrade provides brand-new table styles for PC/mobile
• Enhance filter and table column configuration capabilities
• Added row click event
• Standardize component property names and categorization

Query Protocol Example

• Table sorting data, used for table request queries, follows the same format as the current data source protocol. After upgrading to component version 2.30.0, newly added table components will have their data model query protocol upgraded to v2, while existing table components will continue using the v1 protocol. Example of v1 protocol parameter structure: [{"orderBy":"updateAt","orderType":"desc"}]. Example of v2 protocol parameter structure: [{"updateAt":"desc"}].
• Table filter data, used for table request queries, follows the same format as the current data source protocol. After upgrading to component version 2.30.0, newly added table components will have their data model query protocol upgraded to v2, while existing table components will continue using the v1 protocol. Example of v1 protocol parameter structure: [{"key":"test","val":"1","rel":"search"}]. Example of v2 protocol parameter structure: {"where":{"$and":[{"test":{"$search":"1"}}]}}.

Upgrade Guide

1. For old table components, click the upgrade button on the right to upgrade to the new table with one click. The action column and global buttons are upgraded to slots, allowing drag-and-drop of components such as buttons into the table's global button slot or action column slot.

2. Global Buttons and Action Column Configuration

After the table is upgraded, the original global buttons and action column buttons are upgraded to slot+button components, and the previously configured selection events are correspondingly upgraded to button events. For complex parameter-passing scenarios, parameters need to be manually reconfigured. Refer to the following example:

This scenario involves table deletion. Bind the table deletion event to the button while configuring input parameters.

• 1. Select the button that needs adjustment, choose the button event, and select the corresponding component and component method.
• 2. Edit the input parameter [Identifier for Data Deletion]. You can select the current row record via prompts and click to select the parameters to be passed.
  • 
  • 

3. Feature Upgrade

After upgrading to component version 3.18.0, the mobile filter has undergone a style upgrade, enhancing the query experience on mobile devices. Users with custom styling requirements can adjust the filter appearance using the form component's style api.

Frequently Asked Questions

When using data container components, must other components be placed inside them?

The Data Container is the core component for page-data interaction, capable of directly querying and displaying data. On our platform, multiple data container components are available, such as ListView, DataView, WdForm, and WdTable.

The Data Container enables deep integration of data and page components. This greatly simplifies data operation processes. In addition to providing data, the Data Container also supports common page interaction features, such as pagination loading, loading status, and error prompts.

When using data containers, if a component relies on data returned by the data container, it is recommended to place the component inside the data container component. For example, to display an image from a specific field in a data detail, it is better to place the component inside the corresponding data container. This way, the data container can automatically handle loading states, loading failures, etc., without needing to worry about rendering timing.

If you only need to use the data container to obtain data without performing UI interactions, you can directly use the Query function to query data.

How do you refresh other components when an event is triggered?

When you need to refresh other components upon an event trigger, bind a variable to the target component's property, for example by referencing this variable in a filter parameter expression. Then change the variable's value in the triggering event to update the corresponding target component's content.