表格

介绍

用于数据收集展示、分析整理、操作处理，提供了行选择、行操作、分页、树形表格等功能

API

Props

参数名	描述	类型	默认值
status	默认状态，表格的显示隐藏状态, "default"|"hide"	string	'default'
loading	是否为加载中状态	boolean	false
rowOrder	显示序号	boolean	false
tableSetting	表格设置	boolean	false
storagePolicy	存储策略,配置存储本地还是API，"local"|"api"	string	'local'
saveSettingApi	保存表格设置的API，保存数据的API	string	-
querySettingApi	查询表格设置的API，查询数据的API	string	-
columns	数据列，表格列数据，包含标题、数据字段等参数	Columns	-
data	表格数据，配置表格数据属性，需包含rows和total属性。表格数据支持数据绑定。	Rows	{ "rows": [],"total": 0}
rowKey	数据主键，选中操作时，key值数据	string	-
rowSelectType	行选择器,表格勾选操作行的状态，关、单选、复选；none|single|multiple）	string	'none'
selectedRows	已选中的行，勾选的行数据，可绑定变量，当用户进行勾选行操作时，绑定的变量会同步进行改变	Record<string,any>[]	[]
rowSelectFunc	勾选行数据改变时，用户勾选行回调事件配置，事件函数params参数对象包含selectedRowKeys（勾选行的数据主键数组）和selectedRows（勾选行数据数组）两个属性	action	-
onSelect	点击行选择器时触发，用户勾选行回调事件配置，事件函数params参数对象包含rowKeys（勾选行的数据主键数组）、rowKey（勾选行主键）、record(当前行数据)三个属性	action	-
onSelectAll	点击全选选择器时触发，用户勾选行回调事件配置，事件函数params参数对象包含checked（勾选状态）和rows（当前表格数据）两个属性	action	-
rowClass	表格行元素的类名	string	''
rowDraggable	行拖拽，是否开启表格行拖动排序（关、锚点）	string	'none'
showTableOperate	显示操作栏	boolean	true
宽	操作栏宽度	number	200
buttonType	操作按钮类型，"text"|"icon"	string	'text'
tableButtons	操作按钮,配置行操作配置按钮	array	-
baseStyle	自定义样式	string	-
customClass	类名绑定	string	-
size	表格整体尺寸大小,可选（'large' | 'medium' | 'small' | 'mini'）	string	'medium'
width	表格宽度	number	-
scrollWidth	滚动容器宽度，表格实际宽度超出时出现滚动条，可选单位为像素或百分比	number	-
scrollHeight	滚动容器高度，表格实际高度超出时出现滚动条，可选单位为像素或百分比	number	-
bordered	显示边框	boolean	false
stripe	显示斑马纹	boolean	false
showHeader	显示表头	boolean	true
uniqueId	唯一标识	string	-
enptyText	空数据文案	string	'暂无数据'
highLightKeys	行高亮显示,决定高亮显示的数据，值为「数据主键」数组	array<string | number>	-
spanMethod	合并单元格,通过调用函数返回合并的行数和合并的列数，函数示例见下方代码	function	-
columnResizable	是否允许调整列宽	boolean	true
pagination	使用分页	boolean	true
paginationType	类型,分页器的样式风格类型，可选（'default' | 'simple'）	string	'default'
pageNum	当前页数	number	-
pageSize	每页展示数量	number	-
singlePageHidePagination	单页时隐藏分页	boolean	false
showTotal	显示数据总数	boolean	true
customTotalRender	自定义总条数内容	function	-
showPageSizeOptions	显示数据条数选择器	boolean	true
pageSizeOptions	条数选项列表	string	10,20,30,40,50
showJumber	显示跳转	boolean	true
treeData	启用树形	boolean	false
expandedRowKeys	展开渲染的行	Record<string,any>[]	-
onExpand	展开收起触发的事件	function	-
fixed	固定列	boolean	false
fixedLeft	左侧固定列数	number	-
fixedRight	右侧固定列数	number	-

单元格合并示例

/**
 *  单元格合并函数 
 *  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 数据列-操作

参数名	描述	类型	默认值
title	标题	string	'default'
name	数据字段,与表格数据的映射字段名称	string	''
colType	数据展示类型,该字段在表格单元格中的展示类型（文本、连接、图片、附件、状态、标签等）	string	'text'
renderFunc	自定义展示配置,当字段展示类型为'自定义'时，可配置自定义渲染函数。渲染函数同时支持配置 '鼠标点击' 等事件，详情参考帮助文档。	function	渲染函数默认见下面自定义展示配置
allowCopy	允许复制	boolean	false
hide	隐藏列,是否在表格中隐藏该列展示	boolean	false
groupTitle	分组标题,用于复合表头类型表格，当多个连续列的分组标题设置为相同内容时，这多个列会展示为复合表头形式，复合表头标题为填写内容	string	''
width	列宽,表格列宽度	number	-
tip	列头提示文字,若进行设置，会在表头标题旁显示提示图标，鼠标移入展示提示内容	string	''
titleOperate	列头操作,配置列头的操作按钮，'无' | '排序'	string	'left'
titleAlign	列头对齐,表格列标题单元格的对齐方式，'居左' | '居中' | '居右'	string	'left'
dataAlign	数据对齐,表格内容单元格的对齐方式，'居左' | '居中' | '居右'	string	'left'
ellipsis	内容超出...截断 ，表格单元格内容超出时是否显示...	boolean	false

自定义展示配置

/**
 *  自定义渲染函数 
 *  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 行操作-操作

参数名	描述	类型	默认值
defaultStatus	默认状态，"default"|"hide"	string	'default'
title	标题	string	"自定义"
icon	图标	string	-
status	按钮状态，"default"|"normal"|"success"|"warning"|"danger"	string	'normal'
authControl	权限控制	boolean	true
enableConditions	按条件显示	{col:string,operation:string,valueType:string,value:string}[]	-
disableconditions	按条件禁用	function	-

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>>
onRowClick	点击行数据时触发	ctx, params: Array<Record<string,any>>

Type

type Columns = {
  id:string,         //数据列id
  title:string，     //数据列名称
  name：string，     //数据列字段名
  coltype:string,    //数据展示类型
  allowCopy:boolean, //允许复制
  hide:boolean       //隐藏列
  }
type Rows = { rows: Record<string,any>[], total: number }

常见场景配置

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

1、表格自定义样式设置

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

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

1、定义三个变量

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

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

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

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

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

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

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