数据表格
WdTable
#
适用场景以表格形式展示多行数据,支持对数据进行排序、搜索、分页、自定义显示内容和操作
#
基础能力说明#
模型页面自动生成表格组件在创建模型应用、模型页面时,会自动在数据的管理表格页面生成该组件,并与数据的新增/更新/查看页面构建关联关系,实现对应的页面跳转逻辑
#
设置表格列的排序表格列默认按所绑定数据模型中的字段顺序进行排序,可在「列管理」属性中拖动调整列顺序

#
添加表格列表格列默认不展示系统字段,包括「数据标识、创建时间、更新时间、所有人、创建人、修改人、所属部门」,可再「列管理」属性中点击「添加列」按钮添加系统字段或之前删除的字段

#
列设置选中「列管理」中的列项目后,会展示列设置弹窗,进行列标题、展示内容类型、列宽、对齐方式、排序导出等效果进行控制

#
调用 APIs 的参数要求当「数据源类型」选择 APIs 时,可绑定 APIs 方法来查询数据并显示在表格中,方法中需要包含以下出入参,并符合有相关要求
方法入参:
- pageNo:页码
- pageSize:每页大小
- orderBy:排序字段名称,可传值出参 records 中的各字段(非必需,如无该参数,将无法进行排序控制)
- orderType:排序方式,升序传值 asc,降序传值 desc(非必需,如无该参数,将无法进行排序控制)
方法出参:
- total:记录总条数
- records:对象数组格式的多条数据,对象内部各元素为表格列字段
字段标识必须与上述标识完全一致,并且都是一级参数,不能包含在其他对象参数中,可参考任一数据模型的「查询列表方法」的参数格式
APIs 连接器方法的出入参格式可参考任意数据模型中预置的「查询列表」方法参数
#
扩展场景说明#
配置自定义列自定义显示内容和样式- 将表格列的展示内容属性设置为「自定义内容」,则该列会形成插槽,允许放入其他组件
- 插槽内部组件的属性,可通过表达式获取当前行相关信息,例如:在自定义列的插槽中拖入文本组件,选中该组件,点击「文本内容」属性右侧的数据绑定按钮,在表达式编辑器中选取行数据字段,或写入其他函数内容,来显示所需信息
#
定义动态行背景表格组件支持对行数据内容进行判断,进而显示不同的背景颜色,示例如下:
- 在「代码编辑器-当前页面-handler」中创建 1 个新的方法
export default function ({ event, data }) { //event.detail中可获得record,rowkey,recordIndex等值,用于行背景颜色的判断控制 return event.detail.recordIndex % 2 === 0 ? 'rgb(199,237,204)' : 'rgb(250,249,222)';}

- 在表格组件的「行背景色」属性中,点击数据绑定按钮,打开弹窗,在表达式模块中写入:$page.handler.color,即可实现奇偶数行显示不同的背景
#
操作列按钮跳转表单页面,并传参当前行数据_id,实现数据的编辑更新在表格组件的操作列节点中,拖拽放入一个按钮组件
将该按钮内容调整为编辑;为保证按钮样式合理美观,可再将按钮类型调整为链接
创建一个表单页面,放入表单容器组件,绑定与表格组件一致的数据模型,表单场景设置为更新
再在大纲树中选中页面节点,条件一个 URL 参数,命名为 id,并将该参数绑定到表单容器的数据标识属性上
返回表格页面,选中刚才添加的按钮组件,配置点击时-打开刚才配置的表格页面,为页面参数 id 绑定表达式,表达式选取「数据标识」字段
完成如上配置,即可实现点击「编辑」按钮,跳转到表单页面,回显表单数据,修改后,点击提交,实现数据修改,再返回表格页面
#
获取「选择框列」选中值表格组件的「选中行改变」事件,可以获取到所选的多行数据信息
- 赋值 event.detail,可将多行数据以 array 形式赋值到变量中
- 赋值 event.detail.map(item => item._id) ,可将所有行数据的「数据标识」(_id)以 array 形式赋值到变量中
#
示例#
交互式预览#
样式 API 自定义样式// 表格样式需要配合id选择器使用#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 变量自定义样式#wd-page-root .wd-table { // 表格背景色 --wd-table-color-bg: #f7ffee; // 鼠标悬浮行背景颜色 --wd-table-row-color-bg-hover: #c7e1bf; // 表头背景颜色 --wd-table-header-color-bg: #c7e1bf; // 行选中颜色 --wd-table-row-color-bg-selected: #cadbc0; // 表格边框颜色 --wd-table-color-border: #c7e1bf; // 表格默认行高(中行高) --wd-table-td-height-md: 70px;}
#
属性组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
---|
数据源 | dataSourceType | "data-model"|"custom-connector" | 基础属性 | "data-model" | 选择数据源类型 |
数据模型 | bindMetadata | object | 基础属性 | - | 展示数据的数据来源,包括数据模型/视图 |
数据过滤 | where | array | 基础属性 | - | 对数据进行筛选过滤 |
排序方式 | orderType | "asc"|"desc" | 基础属性 | "desc" | 可设置升序或降序,绑定表达式时,升序传值asc,降序传值desc |
筛选器 | filterFields | object | 基础属性 | - | 配置表格运行态的筛选器 |
APIs | bindConnectMetadata | object | 基础属性 | - | 展示数据的 APIs 来源选择 |
调用方法 | connectorMethod | object | 基础属性 | - | 进行数据的 APIs 调用方法选择 |
查询入参 | connectorParams | string | 基础属性 | - | 对APIs 调用方法获取的数据进行筛选过滤。例如 {name:'',value:''} |
列管理 | columnSets | array | 基础属性 | [] | 配置表格列,支持拖拽调整列排序 |
数据选择列 | columnSelectType | "radio"|"select"|"disable" | 基础属性 | "select" | 控制表格数据选择列的样式 |
左冻结 | fixedFront | string | 基础属性 | - | 左冻结与右冻结属性配置的列出现交叉重复时,为避免表格的横向滚动锁定,冻结属性会自动失效 |
右冻结 | fixedEnd | string | 基础属性 | - | 左冻结与右冻结属性配置的列出现交叉重复时,为避免表格的横向滚动锁定,冻结属性会自动失效 |
PC端每页行数 | defaultPageSize | "10"|"20"|"30"|"50"|"100"|"200" | 基础属性 | "10" | 配置PC端表格默认的每页行数 |
行背景颜色 | rowColor | string | 基础属性 | - | 设置固定值或绑定低码方法,实现行背景颜色的改变 |
操作列 | enableCellCustomOption | boolean | 基础属性 | true | 开启后,可拖拽按钮等组件,放入大纲树的操作列节点或表格的操作列区域 |
全局按钮 | enableGlobalButton | boolean | 基础属性 | true | 开启后,可拖拽按钮等组件,放入大纲树的全局按钮节点或表格的全局按钮区域 |
分页控件 | enablePagination | boolean | 基础属性 | true | 开启后,可支持表格分页 |
刷新按钮 | enableRefreshBtn | boolean | 基础属性 | true | 开启后,可展示刷新按钮 |
行高调节按钮 | enableTableHeightSizeBtn | boolean | 基础属性 | true | 开启后,可支持调节行高 |
#
事件组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
点击表格行 | tabTableRow |
| 移动端,PC端 | 点击表格某一行时触发 |
选中行改变 | rowsSelect |
| 移动端,PC端 | 点击数据选择列(多选/单选列),改变已选中的行时触发 |
数据查询成功 | querySuccess |
| 移动端,PC端 | 每次数据查询成功时均会触发,包括切换分页、修改筛选条件时 |
#
属性 API通过属性 API,可以获取组件内部的状态和属性值
只读属性名 | 属性标识 | 类型 | 说明 |
---|
数据源 | dataSourceType | "data-model"|"custom-connector" | 选择数据源类型 |
数据模型 | bindMetadata | object | 展示数据的数据来源,包括数据模型/视图 |
列管理 | columnSets | array | 配置表格列,支持拖拽调整列排序 |
PC端每页行数 | defaultPageSize | "10"|"20"|"30"|"50"|"100"|"200" | 配置PC端表格默认的每页行数 |
默认页码 | defaultPageIndex | number | 表格默认的初始页码 |
表格数据 | records | array | 表格数据 |
表格数据总数 | total | number | 表格数据总数 |
页码 | pageNo | number | 表格当前页码 |
页长 | pageSize | number | 每页显示行数 |
表格选中数据 | selectedRecords | array | 表格选中的数据 |
#
方法 API通过方法 API,可以通过程序触发组件内部的方法,比如提交表单,显示弹窗等
方法名 | 方法标识 | 方法说明 |
---|
数据导入 | import | 仅当数据源为数据模型场景时支持导入,可按照模版,上传 excel 文件,录入数据 |
数据导出(可选导出模式) | exportOptionalMode | 支持将表格数据导出为excel,可选:导出全部数据、筛选后的数据、选中数据 |
数据导出(导出选中数据) | export | 支持将当前选中数据导出为 excel |
删除单条数据 | deleteOne | 仅当数据源为数据模型场景时,支持删除行数据 |
删除选中数据 | deleteSelected | 仅当数据源为数据模型场景时,支持删除当前选中的行记录 |
刷新表格(查看第1页数据) | refresh | 刷新表格(查看第 1 页数据) |
刷新表格(查看当前页数据) | refreshKeepPage | 刷新表格(查看当前页数据) |
打开操作列弹窗(仅移动端生效) | openOperationDialog | 打开操作列弹窗 |
#
样式 API通过样式 API,可以覆盖组件中内部元素的样式来实现自定义
名称 | 类名 | 说明 |
---|
根元素 | .wd-table-wrap | 数据表格组件根元素 |
PC 端表格组件根元素 | .wd-pc-table | 可以为 PC 端的表格编写样式 |
H5 端表格组件根元素 | .wd-h5-table | 可以为 H5 端的表格编写样式 |
筛选器容器 | .wd-table-wrap-filter | 筛选器容器根元素 |
H5 端筛选器容器 | .wd-h5-table-wrap-filter | 可以为 H5 端的筛选器容器编写样式 |
表格容器 | .wd-table | 表格展示区域根元素 |
表格头部 | .wd-table__header | 表格头部区域根元素 |
表格内容展示 | .wd-table__body | 表格内容展示区域根元素 |
表格边框 | .wd-table--bordered | 表格边框 |
表格行高-低 | .wd-table--size-sm | 表格行高-低 |
表格行高-中 | .wd-table--size-md | 表格行高-中 |
表格行高-高 | .wd-table--size-lg | 表格行高-高 |
分页器容器 | .wd-pagination | 分页器容器根元素 |
#
CSS 变量.wd-table-wrap { //默认背景颜色 --wd-table-color-bg: var(--wd-color-bg-container); //表头背景颜色 --wd-table-header-color-bg: var(--wd-color-bg-secondarycontainer);
//行背景颜色-默认 --wd-table-box-header-tr-color-bg: transparent; //行背景颜色-鼠标悬停 --wd-table-row-color-bg-hover: var(--wd-color-bg-container-hover); //行背景颜色-选中状态 --wd-table-row-color-bg-selected: var(--wd-color-brand-light);
//表格文字字号 --wd-table-font-size: var(--wd-font-size-default); //表格文字颜色 --wd-table-color-text: var(--wd-color-text-default); //表格文字字重 --wd-table-color-text-weight: var(--wd-color-text-default);
//表头文字颜色 --wd-table-header-color-text: var(--wd-color-text-default); //表头文字字重 --wd-table-header-font-weight: var(--wd-font-weight-medium);
//表格行高-低 --wd-table-td-height-sm: 3rem; //表格行高-中 --wd-table-td-height-md: 3.375rem; //表格行高-高 --wd-table-td-height-lg: 5.125rem;
//表格外边框颜色 --wd-table-color-border: var(--wd-color-border-default); //表格内边框颜色 --wd-table-color-border-inner: var(--wd-color-border-separator);
//表格圆角 --wd-table-border-radius: calc(var(--wd-border-radius) * 2);
//移动端底部按钮区域边框颜色 --wd-table-footer-border-color: var(--wd-color-border-default);}
#
版本变化- 本次升级提供全新的 PC 端/移动端表格样式
- 完善筛选器、表格列配置能力
- 新增点击表格行事件
- 规范组件属性名称与分类