跳到主要内容

数据表格

WdTable

适用场景#

以表格形式展示多行数据,支持对数据进行排序、搜索、分页、自定义显示内容和操作

基础能力说明#

模型页面自动生成表格组件#

在创建模型应用、模型页面时,会自动在数据的管理表格页面生成该组件,并与数据的新增/更新/查看页面构建关联关系,实现对应的页面跳转逻辑

设置表格列的排序#

表格列默认按所绑定数据模型中的字段顺序进行排序,可在「列管理」属性中拖动调整列顺序

添加表格列#

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

列设置#

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

调用 APIs 的参数要求#

  1. 当「数据源类型」选择 APIs 时,可绑定 APIs 方法来查询数据并显示在表格中,方法中需要包含以下出入参,并符合有相关要求

    1. 方法入参:

      • pageNo:页码
      • pageSize:每页大小
      • orderBy:排序字段名称,可传值出参 records 中的各字段(非必需,如无该参数,将无法进行排序控制)
      • orderType:排序方式,升序传值 asc,降序传值 desc(非必需,如无该参数,将无法进行排序控制)
    2. 方法出参:

      • total:记录总条数
      • records:对象数组格式的多条数据,对象内部各元素为表格列字段
    3. 字段标识必须与上述标识完全一致,并且都是一级参数,不能包含在其他对象参数中,可参考任一数据模型的「查询列表方法」的参数格式

  2. APIs 连接器方法的出入参格式可参考任意数据模型中预置的「查询列表」方法参数

扩展场景说明#

配置自定义列自定义显示内容和样式#

  1. 将表格列的展示内容属性设置为「自定义内容」,则该列会形成插槽,允许放入其他组件
  2. 插槽内部组件的属性,可通过表达式获取当前行相关信息,例如:在自定义列的插槽中拖入文本组件,选中该组件,点击「文本内容」属性右侧的数据绑定按钮,在表达式编辑器中选取行数据字段,或写入其他函数内容,来显示所需信息

定义动态行背景#

表格组件支持对行数据内容进行判断,进而显示不同的背景颜色,示例如下:

  1. 在「代码编辑器-当前页面-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)';}
  1. 在表格组件的「行背景色」属性中,点击数据绑定按钮,打开弹窗,在表达式模块中写入:$page.handler.color,即可实现奇偶数行显示不同的背景

操作列按钮跳转表单页面,并传参当前行数据_id,实现数据的编辑更新#

  1. 在表格组件的操作列节点中,拖拽放入一个按钮组件

  2. 将该按钮内容调整为编辑;为保证按钮样式合理美观,可再将按钮类型调整为链接

  3. 创建一个表单页面,放入表单容器组件,绑定与表格组件一致的数据模型,表单场景设置为更新

  4. 再在大纲树中选中页面节点,条件一个 URL 参数,命名为 id,并将该参数绑定到表单容器的数据标识属性上

  5. 返回表格页面,选中刚才添加的按钮组件,配置点击时-打开刚才配置的表格页面,为页面参数 id 绑定表达式,表达式选取「数据标识」字段

  6. 完成如上配置,即可实现点击「编辑」按钮,跳转到表单页面,回显表单数据,修改后,点击提交,实现数据修改,再返回表格页面

获取「选择框列」选中值#

表格组件的「选中行改变」事件,可以获取到所选的多行数据信息

  1. 赋值 event.detail,可将多行数据以 array 形式赋值到变量中
  2. 赋值 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"选择数据源类型
数据模型bindMetadataobject基础属性-展示数据的数据来源,包括数据模型/视图
数据过滤wherearray基础属性-对数据进行筛选过滤
排序方式orderType"asc"|"desc"基础属性"desc"可设置升序或降序,绑定表达式时,升序传值asc,降序传值desc
筛选器filterFieldsobject基础属性-配置表格运行态的筛选器
APIsbindConnectMetadataobject基础属性-展示数据的 APIs 来源选择
调用方法connectorMethodobject基础属性-进行数据的 APIs 调用方法选择
查询入参connectorParamsstring基础属性-对APIs 调用方法获取的数据进行筛选过滤。例如 {name:'',value:''}
列管理columnSetsarray基础属性[]配置表格列,支持拖拽调整列排序
数据选择列columnSelectType"radio"|"select"|"disable"基础属性"select"控制表格数据选择列的样式
左冻结fixedFrontstring基础属性-左冻结与右冻结属性配置的列出现交叉重复时,为避免表格的横向滚动锁定,冻结属性会自动失效
右冻结fixedEndstring基础属性-左冻结与右冻结属性配置的列出现交叉重复时,为避免表格的横向滚动锁定,冻结属性会自动失效
PC端每页行数defaultPageSize"10"|"20"|"30"|"50"|"100"|"200"基础属性"10"配置PC端表格默认的每页行数
行背景颜色rowColorstring基础属性-设置固定值或绑定低码方法,实现行背景颜色的改变
操作列enableCellCustomOptionboolean基础属性true开启后,可拖拽按钮等组件,放入大纲树的操作列节点或表格的操作列区域
全局按钮enableGlobalButtonboolean基础属性true开启后,可拖拽按钮等组件,放入大纲树的全局按钮节点或表格的全局按钮区域
分页控件enablePaginationboolean基础属性true开启后,可支持表格分页
刷新按钮enableRefreshBtnboolean基础属性true开启后,可展示刷新按钮
行高调节按钮enableTableHeightSizeBtnboolean基础属性true开启后,可支持调节行高

事件#

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

事件名
事件code
事件出参 event.detail
适用情况
说明
点击表格行tabTableRow
  • record:array选中行记录
  • rowKey:string选中行记录id
  • recordIndex:number选中行index
移动端,PC端点击表格某一行时触发
选中行改变rowsSelect
  • data:array选中行记录
移动端,PC端点击数据选择列(多选/单选列),改变已选中的行时触发
数据查询成功querySuccess
  • data:object查询结果,查询条件
移动端,PC端每次数据查询成功时均会触发,包括切换分页、修改筛选条件时

属性 API#

通过属性 API,可以获取组件内部的状态和属性值

只读属性名
属性标识
类型
说明
数据源dataSourceType"data-model"|"custom-connector"选择数据源类型
数据模型bindMetadataobject展示数据的数据来源,包括数据模型/视图
列管理columnSetsarray配置表格列,支持拖拽调整列排序
PC端每页行数defaultPageSize"10"|"20"|"30"|"50"|"100"|"200"配置PC端表格默认的每页行数
默认页码defaultPageIndexnumber表格默认的初始页码
表格数据recordsarray表格数据
表格数据总数totalnumber表格数据总数
页码pageNonumber表格当前页码
页长pageSizenumber每页显示行数
表格选中数据selectedRecordsarray表格选中的数据

方法 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分页器容器根元素

了解样式 API

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