高级表格

介绍

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

API

Props 属性-基础配置

参数名	描述	类型	默认值
status	高级表格的显示隐藏状态	'default' \|'hide'	'default'
title	表格上方显示的标题	string	''
loading	表格的加载状态	boolean	false
showTitle	控制标题的显示隐藏状态	boolean	false
rowOrder	控制序号列的显示隐藏状态	boolean	false

Props 属性-数据列

参数	描述	类型	默认值
title	标题	string	'default'
name	数据字段	string	''
colType	数据展示类型	string	'text'
renderFunc	自定义展示配置，当字段展示类型为'自定义'时，可配置自定义渲染函数。渲染函数同时支持配置 '鼠标点击' 等事件，详情参考帮助文档。	function	渲染函数默认见下面自定义展示配置
hide	隐藏列，是否在表格中隐藏该列展示	boolean	false
groupTitle	分组标题，用于复合表头类型表格，当多个连续列的分组标题设置为相同内容时，这多个列会展示为复合表头形式，复合表头标题为填写内容	string	''
width	列宽	number	-
tip	列头提示文字，若进行设置，会在表头标题旁显示提示图标，鼠标移入展示提示内容	string	''
titleOperate	列头操作	'none'\|'sorter'	'none'
sortord	排序方式	'internal'\|'event'	'internal'
titleAlign	列头对齐，表格列标题单元格的对齐方式	'left'\|'center'\|'right'	'left'
dataAlign	数据对齐，表格内容单元格的对齐方式	'left'\|'center'\|'right'	'left'
ellipsis	表格单元格内容超出时是否显示...	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 属性-数据列-数据编辑格式

参数	描述	类型	默认值
editType	数据编辑格式	'input'\|'inputNumber'\|'textarea'\| 'select'\|'treeSelect'\|'date'\|'time'	'input'
placeholder	占位提示	string	-
validate	数据校验方式，可选无校验或预设的优先校验或自定义校验	'none'\|'email'\|'custom'	'none'
regex	正则表达式	string	-
showColumnBtn	按钮，是否显示控件后的按钮	boolean	false
columnBtnIcon	图标选择	string	-
precision	数字精度	number	-
max	数字的最大值	number	-
min	数字的最小值	number	-
max	最大长度	number	-
autoSize	自适应内容高度	boolean	false
showWordLimit	字数统计	boolean	false
allowClear	允许清除	boolean	false
mode	数据编辑格式-单选/复选	'single'\|'multiple'	'single'
optionType	选项类型，下拉选择的选项来源类型	'custom'\|'api'\|'cascade'	'custom'
fieldNames	指定字段配置项、指定字段名，选项数据中 key 和 title 对应的取值字段	FieldNames
options	数据配置、选项数据，数据编辑格式为树选择时生效	Object[]	-
search	搜索	'off'\|'on'\|'remote'	false
api	查询API，选项的来源类型为接口获取时，配置接口api，可选项来源于页面API管理面板维护列表	API	-
cascadeCol	关联数据，选项的来源类型为数据联动时，关联数据的字段名	string	-
cascadeApi	联动查询API，选项的来源类型为数据联动时，关联数据变化时调用的查询API，可选项来源于页面API管理面板维护列表	API	-
multiple	多选	boolean	false
isVirtualList	是否开启虚拟列表	boolean	false
virtualListHeight	虚拟列表可视区域高度	number	200
switch	可搜索	boolean	false
filterOption	是否过滤选项	boolean	false
searchDelay	搜索事件延迟时间	string	'500'
loading	是否为加载状态	boolean	false
isLoadMore	开启异步加载	boolean	false
loadMore	异步加载函数	Function	-
selectable	可选节点	Function	-
dataType	日期类型	'date'\|'month'\|'week'\|'quarter'\|'year'	'date'
isRangeSelect	范围选择，数据编辑格式为日期选择时，是否开启日期范围选择	boolean	false
format	日期格式，数据编辑格式为日期选择时，日期格式的配置，可选	'YYYY-MM-DD'\|'MM-DD'\|'YYYY-MM-DD HH:mm'\|'YYYY-MM-DD HH:mm:ss'	-
format	时间格式，数据编辑格式为时间选择时，时间格式的配置，可选	'HH:mm:ss'\|'HH:mm'\|'HH'	'HH:mm:ss'

Props 属性-数据源

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

注意

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

Props 属性-顶部操作

参数	描述	类型	默认值
showTableOperate	显示操作栏，顶部操作区域的显隐状态	boolean	true
buttons	操作按钮，支持内置新增、删除、导入按钮及自定义按钮。内置导入按钮的配置方式见底部内置导入功能配置示例	TopButton[]	-
addValue	表单值，在新增按钮配置面板中的内置表单中配置，支持绑定变量	Record<string,any>	{}
refresh	刷新，刷新快捷操作按钮显隐状态	boolean	false
filter	筛选，筛选快捷操作按钮显隐状态，筛选操作用于用户自定义查询条件及查询操作符	boolean	false
setting	设置，设置快捷操作按钮显隐状态，设置操作用于用户自定义表格行密度（仅支持本地存储）、自定义列显隐状态及展示顺序（可配置本地存储或API存储）。	boolean	false
storagePolicy	存储策略，配置自定义列显隐状态及展示顺序的存储策略，可选。	'local'\|'api'	'local'
saveSettingsApi	保存表格设置的API，配置API存储策略时保存的api。如果不做配置，将使用盘古提供的默认接口	string	-
querySettingsApi	查询表格设置的API，配置API存储策略时查询的api。如果不做配置，将使用盘古提供的默认接口	string	-

Props 属性-顶部操作-操作按钮

参数	描述	类型	默认值
defaultStatus	默认状态	'default'	'hide',
title	标题	string	-
btnType	样式	'primary'\|'default'\|'dashed'\|'outline'\|'text'	'primary'
status	按钮状态	'default'\|'normal'\|'success'\|'warning'\|'error'	'normal'
authControl	按钮权限	boolean	false
authDesc	权限项描述	string	-
icon	图标	string	-
api	新增API	string	-
loading	加载状态	boolean	false
mode	按钮类型	'default'\|'upload'	'default'
uploadAction	导入action	string	-
uploadName	上传文件名	string	-
uploadAccept	接受文件类型，具体参考 HTML标准	string	-
uploadMultiple	支持多文件上传	boolean	false
uploadHeaderData	上传请求header附加的数据	Object<string,any>	-
uploadData	上传请求附加的数据	string	-
ableCondition	可用条件	'none'\|'one'\|'moreThanOne'\|'moreThanTwo'	'none'
select	显示条件	'none'\|'one'\|'moreThanOne'\|'moreThanTwo'	'none'
groupTitle	分组标题	string	-
uploadModalWidth	浮层宽度	`{value: string; unit: 'px'\|'%';}`	-

Props 属性-行操作

参数	描述	类型	默认值
rowSelectType	行选择器，表格勾选操作行的状态（关`none`、单选`single`、复选`multiple`）	'none'\|'single'\|'multiple'	'none'
checkType	行勾选方式（勾选框、点击行）	'checkbox'\|'row'	'checkbox'
maxCount	最大条数，填写空或者0不限制选择数量，设置最大可选数量后不可全选	number	-
selectedRows	已选中的行，勾选的行数据，可绑定变量，当用户进行勾选行操作时，绑定的变量会同步进行改变	Record<string,any>[]	[]
rowSelectFunc	勾选行数据改变时，用户勾选行回调事件配置，事件函数params参数对象包含selectedRowKeys（勾选行的数据主键数组）和selectedRows（勾选行数据数组）两个属性	Function	-
onSelect	点击行选择器时触发，用户勾选行回调事件配置，事件函数params参数对象包含rowKeys（勾选行的数据主键数组）、rowKey（勾选行主键）、record(当前行数据)三个属性	Function	-
onSelectAll	点击全选选择器时触发，用户勾选行回调事件配置，事件函数params参数对象包含checked（勾选状态）和rows（当前表格数据）两个属性	Function	-
rowClass	表格行元素的类名	string	''
rowDraggable	行拖拽，是否开启表格行拖动排序（关、锚点）	string	'none'\|'draggable'
showTableOperate	显示操作栏，操作列显隐状态	boolean	true
tableOperateWidth	宽度	number	200
buttonType	操作按钮类型	'text'\|'icon'	'text'
tableButtons	操作配置，操作栏中操作的配置	OButton[]	-
tableMaxButtons	最大展示数量，操作列按钮的最大展示数量，超过数量会将超出按钮显示到`更多`按钮中	number	3
record	当前操作行，可绑定变量，当用户进行操作列按钮点击操作时，绑定的变量会同步进行改变	Record<string,any>	-

Props 属性-搜索

参数	描述	类型	默认值
searchType	类型，索区域的类型（完整、简约、关）	'default'\|'simple'\|'none'	'default'
defaultUnfold	默认展开，搜索区域默认是否展开（类型===完整）	boolean	false
expandNewline	展开收起通栏展示，展开收起操作是否单独一行展示，关闭后展开收起放在按钮操作上（类型===完整）	boolean	true
searchColumns	查询条件	EditColumn[]	[]
searchValue	查询默认值	Record<string,any>	{}
labelWidth	标题宽度，查询区域表单项标题宽度	number	100
spanXs	布局，屏幕 < 576px	string	'24'
spanSm	布局，屏幕 ≥ 576px	string	'12'
spanMd	布局，屏幕 ≥ 768px	string	'12'
spanLg	布局，屏幕 ≥ 992px	string	'12'
spanXl	布局，屏幕 ≥ 1200px	string	'8'
spanXxl	布局，屏幕 ≥ 1600px	string	'6'

Props 样式

参数	描述	类型	默认值
baseStyle	自定义样式	string	-
customClass	类名绑定	string	-
自定义样式	表格整体自定义样式	string	-
size	尺寸，表格整体尺寸大小,可选（'大' \| '中' \| '小' \| '迷你'）	'large'\|'medium'\|'small'\|'mini'	'medium'
width	表格宽度，可选单位为像素或百分比	number	-
scrollWidth	滚动容器宽度，表格实际宽度超出时出现滚动条，可选单位为像素或百分比	number	-
scrollHeight	滚动容器高度，表格实际高度超出时出现滚动条，可选单位为像素或百分比	number	-
bordered	显示边框，控制表格是否显示边框	boolean	false
stripe	显示斑马纹，控制表格是否显示斑马纹	boolean	false
showHeader	显示表头，控制表格是否显示表头	boolean	true

Props 高级-基础配置

参数	描述	类型	默认值
uniqueKey	唯一标识	string	-
emptyText	空数据文案，表格数据为空时显示的文案内容	string	'暂无数据'
highLightKeys	行高亮显示，决定高亮显示的数据，值为「数据主键」数组	Array<string \| number>	-
spanMethod	合并单元格，通过调用函数返回合并的行数和合并的列数，函数示例见下方代码	function	-
columnResizable	是否允许调整列宽，控制是否允许用户调整列宽	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 高级-分页

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

Props 高级-树形表格

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

Props 高级-固定列

参数	描述	类型	默认值
fixed	固定列	boolean	false
fixedLeft	左侧固定列数	number	-
fixedRight	右侧固定列数	number	-

Events

Events 属性-基础配置

事件名	描述	回调参数
onSearch	分页、搜索、排序时触发	ctx params: SearchParams
onDragEnd	表格拖拽排序时触发	ctx params: Array<Record<string,any>>
onRowClick	点击行数据时触发	ctx params: Array<Record<string,any>>

Events 属性-数据列

事件名	描述	回调参数
onClick	点击时触发，在数据编辑格式配置面板内配置，适用于文本、数字、文本域类型的字段，在新增弹窗、编辑弹窗、搜索面板的表单内的相应字段点击时触发	ctx
onClickBtn	点击按钮时触发，在数据编辑格式配置面板内配置，适用于文本、数字、文本域类型的字段	ctx
onChange	用户搜索时事件触发，适用于下拉选择、树选择类型的字段	ctx params:{ value:string }
onSearch	用户搜索时事件触发，适用于树选择类型的字段	ctx params:{ value:string }

Events 属性-顶部操作-操作按钮

事件名	描述	回调参数
onClick	用户点击时触发，按钮类型为自定义时生效	ctx
onBeforeUpload	上传前触发，按钮类型为上传时生效	ctx params:BeforeUploadFileItem
onChange	上传文件改变后触发，按钮类型为上传时生效	ctx params:{fileItem: FileItem, fileList: FileItem[]}
onSuccess	上传成功时触发，按钮类型为上传时生效	ctx params:{fileItem: FileItem, fileList: FileItem[]}

Type

javascript


// 行操作按钮配置
type OButton = {
  id：number, // 按钮id
  title: string, // 标题
  type: 'custom'|'upload'|'delete'|'add', // 类型，custom:自定义，upload：上传，delete：删除，add：新增
  defaultStatus: "default"|"hide", // 默认状态
  status: "default"|"normal"|"success"|"warning"|"danger", // 按钮状态
  authControl: boolean, // 权限控制
  authDesc：string, // 权限项描述
  icon: string, // 图标
  loading: boolean, // 加载状态
  mode: 'default'|'upload', // 按钮类型
  enableConditions: string, // 按条件显示
  disableConditions: string, // 按条件禁用
  columns: EditColumn[], // 表单项
  deleteText: string, // 删除确认文案
}

// 顶部按钮上传文件前配置
type BeforeUploadFileItem = {
  lastModified: number,
  lastModifiedDate: string,
  name: string,
  size: number,
  type: string,
  webkitRelativePath: string
}

// 上传文件改变后触发配置
type FileItem = {
  "file":File,
  "name":string,
  "percent":number,
  "response":{
    "alert":string,
    "code":string
    "data":any,
    "msg":string
    "ts":number,
  }
  "status":string,
  "uid":string,
  "url":string,
}

// 查询条件配置
type EditColumn = {
  name: string,
  title: string,
  spanNum: number,
  required: boolean,
  selected: boolean,
  default: string,
  allowClear: boolean
}

// 分页、搜索、排序时参数配置
type SearchParams = {
  pageNum: number,
  pageSize: number,
  searchInfo: Record<string, any>, 
  from: "search"\|"reset"\|"pagination"\|"order"\|"filter" 
}

// 指定字段配置
type FieldNames = {
  key: string,
  title: string,
  // 指定其他字段名
  [name: string]: string,
}

// 上传接口返回数据结构
type UploadResponse = {
  code: number|string,
  // 导入接口返回数据中涉及数据字段名的地方，请对应当前高级表格组件中配置的字段信息中的数据字段名，否则会出现数据展示异常。
  data: UploadResponseData,
}
type UploadResponseData = {
  header: Record<string, string>, 
  data: Array<Record<string,any>>
}

// OnAfterUpload事件脚本执行返回数据结构
type AfterUploadData = {
  // 预览表格的列展示配置 
  tableColumns: Array<{ title: string, dataIndex: string, width: number }>,
  // 预览表格的列表数据
  tableData: Array<Record<string, any>>,
  // 最终调用保存接口时提交的数据
  submitData: Array<Record<string, any>>,
  // 预览表格顶部提示的不匹配字段
  errorColumns: Array<string>
}

常见场景配置

内置导入功能配置示例

1、配置导入action，为默认的POST类型接口，上传文件数据的字段名为file，该导入接口需要返回所导入文件内的文件数据，返回数据结构定义见UploadResponse。数据示例如下：

json

{
  code: 0,
  data: {
    header: {
      "name": "姓名",
      "employDate": "入职日期",
      "contractDate": "合同日期",
      "salary": "月薪",
    },
    data: [
      {
        "name": "小王",
        "employDate": "2018-08-22",
        "contractDate": "2018-08-22 ~ 2018-08-22",
        "salary": "35,000.00"
      },
      {
        "name": "小明",
        "employDate": "2018-08-22",
        "contractDate": "2018-08-22 ~ 2018-08-22",
        "salary": "35,000.00"
      }
    ]
  }
}

2、如果导入接口返回数据结构不符合UploadResponse定义的标准，可以在前端处理，为导入按钮配置OnAfterUpload事件处理函数，在函数中把接口返回的导入数据解析转换为导入功能可接受的数据结构（AfterUploadData），将其在该函数中返回。例如：

javascript

/**
 * 上传后
 * 
 */
function action(ctx, params) {
  // 上传接口返回的数据
  const { response } = params;
  
  // 进行一系列解析转换的处理
  // ...
  
  // 返回处理后的数据（示例数据）
  return {
    // 预览表格的列配置数据
    tableColumns: [
      {
        title: "姓名",
        dataIndex: "name"
      },
      {
        title: "入职日期",
        dataIndex: "employDate"
      },
      {
        title: "合同日期",
        dataIndex: "contractDate"
      },
      {
        title: "月薪",
        dataIndex: "salary"
      },
    ],
    // 预览表格的列表数据
    tableData: [
      {
        "name": "小王",
        "employDate": "2018-08-22",
        "contractDate": "2018-08-22 ~ 2018-08-22",
        "salary": "35,000.00"
      },
      {
        "name": "小明",
        "employDate": "2018-08-22",
        "contractDate": "2018-08-22 ~ 2018-08-22",
        "salary": "35,000.00"
      }
    ],
    // 最终调用保存导入数据接口时提交的数据
    submitData: [
      {
        "name": "小王",
        "employDate": "2018-08-22",
        "contractDate": "2018-08-22 ~ 2018-08-22",
        "salary": "35,000.00"
      },
      {
        "name": "小明",
        "employDate": "2018-08-22",
        "contractDate": "2018-08-22 ~ 2018-08-22",
        "salary": "35,000.00"
      }
    ],
    // 预览表格顶部会提示哪些字段与高级表格字段配置不匹配
    errorColumns: []
  }
}

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

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)
      }
    })
  }

布局组件

通用组件

表单组件

高级组件

图表组件

AI组件

布局组件

基础组件

表单组件

高级组件

组件实战案例

离线打包

高级表格 ​

介绍 ​

API ​

Props 属性-基础配置 ​

Props 属性-数据列 ​

自定义展示配置 ​

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

Props 属性-数据源 ​

Props 属性-顶部操作 ​

Props 属性-顶部操作-操作按钮 ​

Props 属性-行操作 ​

Props 属性-搜索 ​

Props 样式 ​

Props 高级-基础配置 ​

单元格合并示例 ​

Props 高级-分页 ​

Props 高级-树形表格 ​

Props 高级-固定列 ​

Events ​

Events 属性-基础配置 ​

Events 属性-数据列 ​

Events 属性-顶部操作-操作按钮 ​

Type ​

常见场景配置 ​

内置导入功能配置示例 ​

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

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

高级表格

介绍

API

Props 属性-基础配置

Props 属性-数据列

自定义展示配置

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

Props 属性-数据源

Props 属性-顶部操作

Props 属性-顶部操作-操作按钮

Props 属性-行操作

Props 属性-搜索

Props 样式

Props 高级-基础配置

单元格合并示例

Props 高级-分页

Props 高级-树形表格

Props 高级-固定列

Events

Events 属性-基础配置

Events 属性-数据列

Events 属性-顶部操作-操作按钮

Type

常见场景配置

内置导入功能配置示例

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

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