表格

介绍

表格组件是中后台系统中最为常用的数据组件，组件内包含了数据的表格展示、表格的操作按钮以及表格的查询搜索等功能，我们提供了丰富的功能和样式选择以满足不同场景下对表格展示的需要。为了保证交互配置的便捷性，我们不再对表格组件进行更多的组件拆分，全部通过配置项的形式提供给用户进行低代码配置。

API

Props

Props 属性-基础配置

参数	说明	类型	默认值
默认状态	表格的显示隐藏状态, "默认"\|"隐藏"	string	'default'
标题	表格上方显示的标题	string	''
显示标题	控制标题的显示隐藏状态	boolean	false
显示序号	控制序号列的显示隐藏状态	boolean	false

Props 属性-数据列

参数	说明	类型	默认值
标题	表格列标题	string	'default'
数据字段	与表格数据的映射字段名称	string	''
数据展示类型	该字段在表格单元格中的展示类型（文本、连接、图片、附件、状态、标签等）	string	'text'
自定义展示配置	当字段展示类型为'自定义'时，可配置自定义渲染函数。渲染函数同时支持配置 '鼠标点击' 等事件，详情参考帮助文档。	function	渲染函数默认见下面自定义展示配置
数据编辑格式	内置的新增、修改、查询区域中该字段的编辑格式（见下面表格Props 属性-数据列-数据编辑格式）	-	-
隐藏列	是否在表格中隐藏该列展示	boolean	false
分组标题	用于复合表头类型表格，当多个连续列的分组标题设置为相同内容时，这多个列会展示为复合表头形式，复合表头标题为填写内容	string	''
列宽	表格列宽度	number	-
列头提示文字	若进行设置，会在表头标题旁显示提示图标，鼠标移入展示提示内容	string	''
列头对齐	表格列标题单元格的对齐方式，'居左' \| '居中' \| '居右'	string	'left'
数据对齐	表格内容单元格的对齐方式，'居左' \| '居中' \| '居右'	string	'left'
内筒超出...截断	表格单元格内容超出时是否显示...	boolean	false

自定义展示配置

javascript

/**
 *  自定义渲染函数 
 *  data: { record: TableData; column: TableColumnData; rowIndex: number; }
 *  ctx: PangeaContext
 **/
function render(data, ctx) {
  // 支持返回jsx渲染内容
  // 例如 return <span style="color: orange">{record[column.dataIndex]}</span>;
  const record = data.record;
  const column = data.column;
  return record[column.dataIndex]
}

Props 属性-数据列-数据编辑格式

参数	说明	类型	默认值
数据编辑格式	数据编辑的预设格式，可选。【文本 \| 数字 \| 文本域 \| 下拉选择 \| 日期选择】	string	'input'
占位提示	数据编辑时的占位提示信息	string	-
数据校验	数据校验方式，可选无校验或预设的优先校验或自定义校验	string	-
正则表达式	自定义数据校验的正则表达式	string	-
数字精度	通过控制数字的小数位数，来控制数字精度	number	-
最大值	数字的最大值	number	-
最小值	数字的最小值	number	-
最大长度	文本域的最大字符长度	number	-
自适应内容高度	是否开启自适应内容高度	boolean	false
字数统计	是否开启字数统计	boolean	false
允许清除	是否开启允许清除	boolean	false
按钮	是否显示控件后的按钮	boolean	false
图标选择	控件后的按钮的图标	string	-
数据编辑格式-单选/复选	数据仅支持单选还是支持复选	string	'single'
选项类型	下拉选择的选项来源类型，可选。【自定义	接口获取	数据联动】
指定字段配置项	选项数据中 key 和 title 对应的取值字段	FieldNames
数据配置	配置下拉选择选项数据属性	Object[]	-
搜索	是否开启搜索	boolean	false
查询API	选项的来源类型为接口获取时，配置接口api，可选项来源于页面API管理面板维护列表	API	-
关联数据	选项的来源类型为数据联动时，关联数据的字段名	string	-
联动查询API	选项的来源类型为数据联动时，关联数据变化时调用的查询API，可选项来源于页面API管理面板维护列表	API	-
日期类型	数据编辑格式为日期选择时，日期类型的配置，可选。【默认	月	周
范围选择	数据编辑格式为日期选择时，是否开启日期范围选择	boolean	false
日期格式	数据编辑格式为日期选择时，日期格式的配置，可选。【 YYYY-MM-DD	MM-DD	YYYY-MM-DD HH:mm

Props 属性-数据源

参数	说明	类型	默认值
通过API获取	表格数据是否通过API获取	boolean	false
表格数据	配置表格数据属性，需包含rows和total属性。表格数据支持数据绑定。	{ rows: Record<string,any>[], total: number }	`{ "rows": [],"total": 0}`
表格数据(API获取)	绑定API，可先在API管理面板维护表格的查询API信息，再在表格数据源配置处打开`通过API获取`开关，`表格数据（API获取）`选择创建好的API。	API	-

注意

请不要忘记数据主键属性的配置，该属性用于标注表格数据的唯一值字段，通常为id字段。该字段会用于删除操作传参。

Props 属性-顶部操作

参数	说明	类型	默认值
显示操作栏	顶部操作区域的显隐状态	boolean	true
操作按钮	顶部操作区域的按钮设置，支持内置新增、删除按钮及自定义按钮。	OButton[]	-
表单值	在新增按钮配置面板中的内置表单中配置，支持绑定变量	Record<string,any>	{}
刷新	刷新快捷操作按钮显隐状态	boolean	false
筛选	筛选快捷操作按钮显隐状态，筛选操作用于用户自定义查询条件及查询操作符	boolean	false
设置	设置快捷操作按钮显隐状态，设置操作用于用户自定义表格行密度、自定义列显隐状态及展示顺序。	boolean	false

Props 属性-行操作

参数	说明	类型	默认值
行选择器	表格勾选操作列的状态（关、单选、复选）	string	'none'
勾选方式	表格行勾选方式（勾选框、点击行）	string	'checkbox'
已选中的行	勾选的行数据，可绑定变量，当用户进行勾选行操作时，绑定的变量会同步进行改变	Record<string,any>[]	[]
勾选行数据改变时	用户勾选行回调事件配置，事件函数params参数对象包含selectedRowKeys（勾选行的数据主键数组）和selectedRows（勾选行数据数组）两个属性	action	-
点击行选择器时触发	用户勾选行回调事件配置，事件函数params参数对象包含rowKeys（勾选行的数据主键数组）、rowKey（勾选行主键）、record(当前行数据)三个属性	action	-
点击全选选择器时触发	用户勾选行回调事件配置，事件函数params参数对象包含checked（勾选状态）和rows（当前表格数据）两个属性	action	-
行拖拽	是否开启表格行拖动排序（关、锚点）	string	'none'
显示操作栏	操作列显隐状态	boolean	true
宽度	操作列宽度	number	200
操作配置	操作栏中操作的配置	OButton[]	-
表单值	在操作配置中编辑操作配置面板中的内置表单中配置，支持绑定变量	Record<string,any>	{}
最大展示数量	操作列按钮的最大展示数量，超过数量会将超出按钮显示到`更多`按钮中	number	3
当前操作行	当前操作的行数据，可绑定变量，当用户进行操作列按钮点击操作时，绑定的变量会同步进行改变	Record<string,any>	-

Props 属性-搜索

参数	说明	类型	默认值
类型	搜索区域的类型（完整、简约、关）	string	'default'
默认展开	搜索区域默认是否展开（类型===完整）	boolean	false
展开收起通栏展示	展开收起操作是否单独一行展示，关闭后展开收起放在按钮操作上（类型===完整）	boolean	true
查询条件	查询条件配置	EditColumn[]	[]
查询默认值	查询默认值配置	Record<string,any>	{}
标题宽度	查询区域表单项标题宽度	number	100
布局	查询条件的响应式栅格设置	Record<string,any>	`{xs:24,sm:12,md:12,lg:12,xl:8,xxl:6}`

Props 样式

参数	说明	类型	默认值
自定义样式	表格整体自定义样式	string	-
尺寸	表格整体尺寸大小,可选（'大' \| '中' \| '小' \| '迷你'）	string	'medium'
表格宽度	表格的宽度，可选单位为像素或百分比	number	-
滚动容器宽度	表格实际宽度超出时出现滚动条，可选单位为像素或百分比	number	-
滚动容器高度	表格实际高度超出时出现滚动条，可选单位为像素或百分比	number	-
显示边框	控制表格是否显示边框	boolean	false
显示斑马纹	控制表格是否显示斑马纹	boolean	false
显示表头	控制表格是否显示表头	boolean	true

Props 高级-基础配置

参数	说明	类型	默认值
唯一标识	组件的唯一标识	string	-
空数据文案	表格数据为空时显示的文案内容	string	'暂无数据'
行高亮显示	决定高亮显示的数据，值为「数据主键」数组	array<string \| number>	-
合并单元格	通过调用函数返回合并的行数和合并的列数，函数示例见下方代码	function	-
是否允许调整列宽	控制是否允许用户调整列宽	boolean	true

单元格合并示例

/**
 *  单元格合并函数 
 *  params: { rowIndex: number; columnIndex: number; column: TableColumnData; record: object; }
 **/
function spanMethod(params, ctx) {
  if (params.rowIndex === 1 && params.columnIndex === 1) {
    return {
      rowspan: 2,
      colspan: 3
    }
  }
}

Props 高级-分页

参数	说明	类型	默认值
是否分页	控制是否开启分页	boolean	true
类型	分页器的样式风格类型，可选（'默认' \| '简约'）	string	'default'
当前页数	分页器的当前页数，支持绑定变量	number	-
每页展示数量	表格每页最多展示数据的条数	number	-
单页时隐藏分页	是否在只有一页时隐藏分页器	boolean	false
显示数据总数	是否显示数据总数	boolean	true
自定义总条数内容	自定义显示数据总数的逻辑	function	-
显示数据条数选择器	是否显示数据条数选择器	boolean	true
条数选项列表	数据条数选择器的可选项	string	`10,20,30,40,50`
显示跳转	是否显示跳转	boolean	true

Props 高级-树形表格

参数	说明	类型	默认值
启用树形	控制是否开启树形表格	boolean	false
展开渲染的行	决定展开的行数据	Record<string,any>[]	-
展开收起触发的事件	展开收起触发的动作	function	-

Props 高级-树形表格

参数	说明	类型	默认值
固定列	控制是否开启固定列	boolean	false
左侧固定列数	左侧固定的列数	number	-
右侧固定列数	右侧固定的列数	number	-

Events

Events 属性-基础配置

事件名	说明	回调参数
onSearch	分页、搜索、排序时触发	ctx, params: { pageNum:number, pageSize:number, searchInfo: Record<string, any>, from: "search"\|"reset"\|"pagination"\|"order"\|"filter" }
onDragEnd	表格拖拽排序时触发	ctx, params: Array<Record<string,any>>

Events 属性-数据列

事件名	说明	回调参数
onClick	在数据编辑格式配置面板内配置，适用于文本、数字、文本域类型的字段，在新增弹窗、编辑弹窗、搜索面板的表单内的相应字段点击时触发	ctx

Type

OButton

参数名	描述	类型
name	操作按钮名称	string
title	操作按钮标题	string
type	按钮边框类型	string
status	按钮状态类型	string
authControl	是否权限控制	boolean
showCondition	按钮显示条件	string
ableCondition	按钮可用条件	string
icon	按钮图标	string
columns	按钮操作（如新增、修改）涉及的表单所包含字段	EditColumn[]
deleteText	删除时的提示文案	string

EditColumn

参数名	描述	类型
name	列名称	string
title	列标题	string
spanNum	合并列数	number
required	是否必填	boolean
selected	是否选中	boolean
default	字段默认值	string

FieldNames

参数	说明	类型	默认值
key	指定 key 值在选项数据中对应的字段名	string	key
title	指定 title 在选项数据中对应的字段名	string	value
...	指定其他字段名，可根据需要自行定义，组件存取值会根据该对象配置进行扩展	string	-

常见场景配置

设置表格高度撑满页面剩余高度

1、表格自定义样式设置

less

:rootNode {
  height: calc(100vh - 200px); // 整个表格高度，根据页面剩余高度自行调整
  display: flex;
  flex-direction: column;
  .arco-table {
    flex: 1;
  }
}

2、设置表格容器滚动高度为任意固定值

跨页选择数据处理 (示例如下)

1、定义三个变量

allSelectedRows 表格所有的勾选行数据
selectedRows 表格当前分页勾选行数据
tableData 表格数据

表格设置的数据主键为：loginName

2、切换分页，表格接口数据获取后对selectedRows进行赋值，可直接将allSelectedRows的值赋给selectedRows，注意：赋值时数据深拷贝一下。

3、行操作设置-点击行选择器时触发

javascript

  const {rowKeys, rowKey, record} = params;
  // 判断当前点击行选择器是勾选还是取消勾选
  if (rowKeys.includes(rowKey)) {
    // 为勾选数据
    if (!ctx.state.allSelectedRows.some(i => i.loginName === rowKey)) {
      ctx.state.allSelectedRows.push(record)
    }
  } else {
    // 为取消勾选数据
    const index = ctx.state.allSelectedRows.findIndex(i => i.loginName === rowKey)
    if (index >= 0) {
      ctx.state.allSelectedRows.splice(index, 1)
    }
  }

4、行操作设置-点击全选选择器时触发

javascript

const {
    checked,
    rows
  } = params
  if (checked) {
    // 全勾选
    rows.forEach(item => {
      if (!ctx.state.allSelectedRows.some(i => i.loginName === item.loginName)) {
        ctx.state.allSelectedRows.push(item)
      }
    })
  } else {
    // 取消全勾选
    rows.forEach(item => {
      const index = ctx.state.allSelectedRows.findIndex(i => i.loginName === item.loginName)
      if (index >= 0) {
        ctx.state.allSelectedRows.splice(index, 1)
      }
    })
  }

表格 ​

介绍 ​

API ​

Props ​

Props 属性-基础配置 ​

Props 属性-数据列 ​

自定义展示配置 ​

Props 属性-数据列-数据编辑格式 ​

Props 属性-数据源 ​

Props 属性-顶部操作 ​

Props 属性-行操作 ​

Props 属性-搜索 ​

Props 样式 ​

Props 高级-基础配置 ​

单元格合并示例 ​

Props 高级-分页 ​

Props 高级-树形表格 ​

Props 高级-树形表格 ​

Events ​

Events 属性-基础配置 ​

Events 属性-数据列 ​

Type ​

OButton ​

EditColumn ​

FieldNames ​

常见场景配置 ​

设置表格高度撑满页面剩余高度 ​

跨页选择数据处理 (示例如下) ​

表格

介绍

API

Props

Props 属性-基础配置

Props 属性-数据列

自定义展示配置

Props 属性-数据列-数据编辑格式

Props 属性-数据源

Props 属性-顶部操作

Props 属性-行操作

Props 属性-搜索

Props 样式

Props 高级-基础配置

单元格合并示例

Props 高级-分页

Props 高级-树形表格

Props 高级-树形表格

Events

Events 属性-基础配置

Events 属性-数据列

Type

OButton

EditColumn

FieldNames

常见场景配置

设置表格高度撑满页面剩余高度

跨页选择数据处理 (示例如下)