数据表格
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 端/移动端表格样式
- 完善筛选器、表格列配置能力
- 新增点击表格行事件
- 规范组件属性名称与分类